/* Home page, tiles, sponsor band and the referee page. Colours come from the tokens in style.css. */

/* ---------------------------------------------------------------------------
   Full-width bands inside a centred layout: the background reaches the window
   edges without widening the page (no horizontal scrolling).
   --------------------------------------------------------------------------- */
.sgh-masthead, .sgh-ref-band { box-shadow: 0 0 0 100vmax var(--sgh-brand-surface); clip-path: inset(0 -100vmax); }

/* ---------------------------------------------------------------------------
   Home page masthead in club blue: name, short facts, two ways in.
   --------------------------------------------------------------------------- */
.sgh-home > .sgh-masthead { margin-bottom: var(--wp--preset--spacing--60); }
.sgh-masthead { background: var(--sgh-brand-surface); color: var(--sgh-on-brand); padding-block: var(--wp--preset--spacing--70); }
.sgh-masthead-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: end; }
.sgh-masthead-grid > * { margin: 0; min-width: 0; }
.sgh-masthead-title { grid-column: 1 / span 7; }
.sgh-masthead-title > * { margin-block: 0; }
.sgh-masthead .sgh-label { color: var(--sgh-on-brand-2); }
@media (max-width: 599px) { .sgh-masthead .sgh-label-sep { display: none; } .sgh-masthead .sgh-label > span:not(.sgh-label-sep) { display: block; } }
.sgh-masthead h1 { margin-block: .5rem 1rem; font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); line-height: 1; letter-spacing: -.01em; color: inherit; text-wrap: balance; }
.sgh-masthead-links { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-weight: 600; }
.sgh-masthead a { color: var(--sgh-on-brand); text-decoration-color: var(--sgh-on-brand-2); }
.sgh-masthead-links a { display: inline-flex; align-items: center; gap: .35em; min-height: var(--sgh-h-control); }
.sgh-masthead .sgh-club-facts { grid-column: 8 / span 5; margin: 0; font-size: var(--wp--preset--font-size--small); }
.sgh-masthead .sgh-club-facts :is(th, td) { padding-block: .5rem; }
.sgh-masthead .sgh-club-facts tr { border-color: var(--sgh-on-brand-line); }
.sgh-masthead .sgh-club-facts tr:first-child { border-top: 1px solid var(--sgh-on-brand-2); }
.sgh-masthead .sgh-club-facts th { color: var(--sgh-on-brand-2); }
/* Year rings behind the masthead (inc/masthead.php, assets/masthead-rings.js). The layer
   takes no input; without JavaScript it stays empty and the band looks as before. */
.sgh-masthead.has-flow { position: relative; }
.sgh-flow { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; pointer-events: none; }
.sgh-flow-field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--sgh-ease); }
.sgh-masthead.is-live .sgh-flow-field, .sgh-flow.is-drawn .sgh-flow-field { opacity: 1; }
/* Map credit (OpenStreetMap, ODbL), small in the lower right corner of the band. */
.sgh-gelaende-osm { position: absolute; z-index: 1; right: max(var(--sgh-gutter), (100% - 1240px) / 2); bottom: .375rem; font-size: .6875rem; line-height: 1.3; color: var(--sgh-on-brand-2); opacity: .8; text-decoration: none; }
.sgh-gelaende-osm:hover, .sgh-gelaende-osm:focus-visible { opacity: 1; color: var(--sgh-on-brand); text-decoration: underline; }
.sgh-flow-pause {
  position: absolute; z-index: 1; top: .25rem; right: calc(max(var(--sgh-gutter), (100% - 1240px) / 2) - .875rem); margin: 0;
  display: grid; place-items: center; width: var(--sgh-h-control); height: var(--sgh-h-control); padding: 0; border: 0;
  background: transparent; color: var(--sgh-on-brand-2); opacity: .7; cursor: pointer;
  transition: opacity var(--sgh-dur-1) var(--sgh-ease), color var(--sgh-dur-1) var(--sgh-ease);
}
.sgh-flow-pause[hidden] { display: none; }
.sgh-flow-pause:hover, .sgh-flow-pause:focus-visible { opacity: 1; color: var(--sgh-on-brand); }
.sgh-flow-pause:focus-visible { outline-offset: -2px; }
.sgh-flow-pause svg { display: block; fill: currentColor; }
.sgh-flow-pause .sgh-flow-i-play, .sgh-flow-pause[data-paused] .sgh-flow-i-pause { display: none; }
.sgh-flow-pause[data-paused] .sgh-flow-i-play { display: inline; }
@media (prefers-reduced-motion: reduce) { .sgh-flow-field { transition: none; } }

/* ---------------------------------------------------------------------------
   Home page sections: each begins with a bar; content sits in the grid.
   --------------------------------------------------------------------------- */
.sgh-home-section { margin-bottom: var(--wp--preset--spacing--80); }
.sgh-home-section > .sgh-bar { margin-bottom: 0; }

/* Lead story: picture over seven columns, text over five. */
.sgh-lead-story { margin-bottom: 0; }
.sgh-lead-story .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.sgh-lead-story + .sgh-news-grid .wp-block-post-template { border-top: 0; }
.sgh-lead-story .wp-block-post { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; padding-block: var(--wp--preset--spacing--50); border-bottom: var(--sgh-hair); }
.sgh-lead-story .wp-block-post > :first-child, .sgh-club > :first-child { grid-column: span 7; }
.sgh-lead-story .wp-block-post > :last-child, .sgh-club > :last-child { grid-column: span 5; }
.sgh-lead-story .wp-block-post > * { margin: 0; }
.sgh-lead-story .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--sgh-focus, 50% 50%); }
.sgh-lead-story .sgh-news-copy { padding-top: 0; }
.sgh-lead-story .wp-block-post-title { margin-block: .5rem 1rem; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.02; letter-spacing: -.01em; }
.sgh-lead-story .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--body); line-height: 1.55; }
.sgh-lead-story .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 4; min-height: 0; }

/* Tiles in a hairline grid: teams from the shared menu, departments from the page. */
.sgh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-left: var(--sgh-hair); }
.sgh-tiles > * { margin: 0; min-width: 0; border-right: var(--sgh-hair); border-bottom: var(--sgh-hair); }
.sgh-department-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sgh-tile { position: relative; display: flex; flex-direction: column; gap: .25rem; min-height: 9rem; padding: 1.25rem 1.25rem 1.5rem; color: inherit; text-decoration: none; transition: background-color var(--sgh-dur-1) var(--sgh-ease); }
.sgh-tiles > li > .sgh-tile { height: 100%; }
.sgh-tile > * { margin: 0; }
.sgh-tile-group { 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); }
.sgh-tile-name { display: block; font: 700 2rem/1.05 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); }
.sgh-tile-name a { color: inherit; text-decoration: none; }
.sgh-tile-name a::after { content: ""; position: absolute; inset: 0; }
a.sgh-tile::after { content: "→"; position: absolute; top: 1.25rem; right: 1.25rem; color: var(--wp--custom--color--link); font-weight: 600; }
/* Department tiles: the same arrow for internal links; external links carry their own ↗. The
   repeated label "Abteilung" under the bar "Abteilungen" says nothing new. */
.sgh-tile:has(.sgh-tile-name a):not(:has(.sgh-tile-name a span))::after { content: "→"; position: absolute; top: 1.25rem; right: 1.25rem; color: var(--wp--custom--color--link); font-weight: 600; }
.sgh-department-tiles .sgh-tile-group { display: none; }
@media (hover: hover) {
  .sgh-tile:hover, .sgh-tiles > :has(a.sgh-tile:hover) { background: var(--wp--preset--color--tint); }
  .sgh-tile:hover .sgh-tile-name { color: var(--wp--custom--color--link); }
}
.sgh-tile:has(a:focus-visible), a.sgh-tile:focus-visible { outline: 2px solid var(--sgh-focus); outline-offset: -2px; }
.sgh-tile:has(a:focus-visible) a:focus-visible { outline: none; }

/* Club section: photo and text side by side, no box. */
.sgh-club { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; padding-top: var(--wp--preset--spacing--50); }
.sgh-club > * { margin: 0; min-width: 0; }
.sgh-club-photo { margin: 0; }
.sgh-club-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sgh-club-photo figcaption { margin-top: .5rem; text-align: left; font-size: var(--wp--preset--font-size--meta); line-height: 1.5; color: var(--wp--preset--color--muted); }
.sgh-club-copy > * { margin-block: 0 1rem; }
.sgh-club-copy h3 { font-size: var(--wp--preset--font-size--headline-m); }
.sgh-club-copy p { color: var(--sgh-ink-2); }
.sgh-link-list { margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; border-top: var(--sgh-hair); }
.sgh-link-list li { border-bottom: var(--sgh-hair); }
.sgh-link-list a { display: flex; align-items: center; min-height: var(--sgh-h-control); padding-block: .5rem; font-weight: 600; text-decoration: none; }
.sgh-link-list a::after { content: "→"; margin-left: auto; padding-left: 1rem; color: var(--wp--custom--color--link); }
.sgh-link-list a:hover { color: var(--wp--custom--color--link); }

/* ---------------------------------------------------------------------------
   Sponsor band above the footer on every page.
   --------------------------------------------------------------------------- */
.sgh-sponsors-strip { margin-block: 0 var(--wp--preset--spacing--40); }   /* die Kuppe des Fußes schließt an */
.sgh-sponsors-run { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) var(--sgh-h-control); align-items: center; gap: 1.25rem; border-top: var(--sgh-rule); padding-block: .75rem; }
.sgh-sponsors-label h2 { margin: 0 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--preset--color--ink); }
.sgh-sponsors-label a { font-size: var(--wp--preset--font-size--meta); font-weight: 600; text-decoration: none; }
.sgh-sponsors-window { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--sgh-line-strong) transparent; mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
/* Focus ring: mask-image hides everything outside the box and fades the sides, so the ring sits inside (offset -2px) and two
   extra mask layers keep its 2px edge strips fully opaque. */
.sgh-sponsors-window:focus-visible { outline-offset: -2px; mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent), linear-gradient(#000 2px, transparent 2px calc(100% - 2px), #000 calc(100% - 2px)), linear-gradient(90deg, #000 2px, transparent 2px calc(100% - 2px), #000 calc(100% - 2px)); }
.sgh-sponsors-track { display: flex; width: max-content; }
.sgh-sponsors-run[data-ready="true"] .sgh-sponsors-window { scrollbar-width: none; }
.sgh-sponsors-run[data-ready="true"] .sgh-sponsors-window::-webkit-scrollbar { display: none; }
.sgh-sponsors-list { --logo-scale: 1; display: flex; gap: 4rem; align-items: center; margin: 0; padding: 0 4rem 0 2.5rem; list-style: none; }
.sgh-sponsors-list li { flex: 0 0 auto; }
.sgh-sponsors-list a { display: flex; min-width: var(--sgh-h-control); min-height: 4rem; align-items: center; justify-content: center; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .sgh-sponsors-list a { padding: .5rem .75rem; background: var(--sgh-logo-surface); }
}
:root[data-scheme="dark"] .sgh-sponsors-list a { padding: .5rem .75rem; background: var(--sgh-logo-surface); }
.sgh-sponsor-logo { display: block; position: relative; overflow: hidden; width: calc(var(--logo-w, 120px) * var(--logo-scale)); height: calc(var(--logo-h, 40px) * var(--logo-scale)); }
.sgh-sponsor-logo img { position: absolute; display: block; max-width: none; height: auto; }
.sgh-sponsor-card .sgh-sponsor-logo { width: min(var(--logo-w), 100%); height: auto; aspect-ratio: var(--logo-r); }
.sgh-sponsor-card .sgh-sponsor-logo img { max-width: none; max-height: none; }
.sgh-sponsor-card .wp-block-image a:has(.sgh-sponsor-logo) { width: 100%; display: flex; justify-content: center; }
@media (pointer: fine) { .sgh-sponsors-run[data-ready="true"] .sgh-sponsors-window { cursor: grab; } }
.sgh-sponsors-run.is-dragging .sgh-sponsors-window { cursor: grabbing; user-select: none; }
.sgh-sponsors-run.is-dragging a { pointer-events: none; }
.sgh-sponsors-list img { -webkit-user-drag: none; }
.sgh-sponsors-copy[hidden], .sgh-sponsors-toggle[hidden] { display: none; }
.sgh-sponsors-toggle { display: grid; place-items: center; width: var(--sgh-h-control); height: var(--sgh-h-control); padding: 0; border: 1px solid transparent; background: transparent; color: var(--wp--preset--color--muted); font: 600 .875rem/1 var(--wp--preset--font-family--text); cursor: pointer; transition: background-color var(--sgh-dur-1), color var(--sgh-dur-1); }
.sgh-sponsors-toggle:hover { background: var(--wp--preset--color--tint); color: var(--wp--custom--color--link); }
.sgh-sponsors-status { grid-column: 1 / -1; margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--label); line-height: 1.45; }

/* ---------------------------------------------------------------------------
   Referee page (template "verein-breit").
   --------------------------------------------------------------------------- */
.sgh-wide-page > .wp-block-post-title { margin-top: 0; }
.sgh-wide-page .wp-block-post-content > * { margin-block: 0; }
.sgh-ref-hero { padding-bottom: var(--wp--preset--spacing--70); }
.sgh-ref-hero > * { margin-block: 0; }
.sgh-referee-now { margin-bottom: .75rem !important; font-weight: 600; color: var(--wp--custom--color--link); }
.sgh-referee-lead { max-width: 34em; margin-bottom: 1rem !important; font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: var(--wp--preset--color--ink); }
.sgh-referee-more { max-width: 36em; margin-bottom: 1.75rem !important; line-height: 1.6; color: var(--sgh-ink-2); }
/* Hero: the invitation on the left, the allowance calculator beside it. */
.sgh-ref-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp--preset--spacing--70); align-items: start; }
.sgh-ref-hero-text > * { margin-block: 0; }
.sgh-team-times { padding: 1.5rem 0 1.25rem; border-top: 4px solid var(--wp--preset--color--brand); border-bottom: var(--sgh-hair); }
.sgh-team-times h2 { margin: 0 0 .5rem; }
.sgh-team-times ul { margin: 0; padding: 0; list-style: none; }
.sgh-team-times li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding-block: .75rem; border-bottom: var(--sgh-hair); }
.sgh-team-times li > a { grid-column: 1; font-weight: 600; }
.sgh-team-times-years { grid-column: 1; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); }
.sgh-team-times-when { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; text-align: right; }
.sgh-team-times-slot { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sgh-team-times-slot b { font-weight: 600; }
.sgh-team-times-slot.is-open { max-width: 10rem; white-space: normal; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); }
.sgh-team-times-note { margin: .75rem 0 0; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); }
.sgh-calc { padding: 1.5rem 0; border-top: 4px solid var(--wp--preset--color--brand); border-bottom: var(--sgh-hair); }
.sgh-calc > * { margin: 0; }
.sgh-calc-kicker { margin-bottom: 1rem !important; }
.sgh-calc-field { margin-bottom: 1.25rem !important; }
.sgh-calc-field label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.sgh-calc-field output { font: 700 var(--wp--preset--font-size--headline-s)/1 var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums; color: var(--wp--custom--color--link); }
.sgh-calc select { width: 100%; min-height: var(--sgh-h-control); padding: .5rem 2.25rem .5rem .75rem; border: 1px solid var(--sgh-line-strong); border-radius: 0; background: var(--wp--preset--color--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235E6170' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .875rem center; color: var(--wp--preset--color--ink); font: inherit; font-size: var(--wp--preset--font-size--small); appearance: none; }
.sgh-calc input[type="range"] { --fill: 42.857%; width: 100%; height: 2.75rem; margin: 0; background: transparent; appearance: none; cursor: pointer; }
.sgh-calc input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--sgh-accent) var(--fill), var(--wp--preset--color--line) var(--fill)); }
.sgh-calc input[type="range"]::-moz-range-track { height: 4px; background: var(--wp--preset--color--line); }
.sgh-calc input[type="range"]::-moz-range-progress { height: 4px; background: var(--sgh-accent); }
.sgh-calc input[type="range"]::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; margin-top: calc(2px - .75rem); border: 3px solid var(--wp--preset--color--surface); border-radius: 50%; background: var(--sgh-accent); box-shadow: 0 0 0 1px var(--sgh-accent); appearance: none; }
.sgh-calc input[type="range"]::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border: 3px solid var(--wp--preset--color--surface); border-radius: 50%; background: var(--sgh-accent); box-shadow: 0 0 0 1px var(--sgh-accent); }
.sgh-calc input[type="range"]:focus-visible { outline: 2px solid var(--sgh-focus); outline-offset: 2px; }
.sgh-calc-result { display: flex; align-items: baseline; gap: .75rem; padding-block: 1rem .75rem; border-top: var(--sgh-hair); }
.sgh-calc-sum { font: 700 var(--wp--preset--font-size--display)/1 var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums; color: var(--wp--custom--color--link); }
.sgh-calc-unit { font-weight: 600; }
.sgh-calc-note { font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--sgh-ink-2); }
.sgh-calc-source { margin-top: .75rem !important; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); }
/* The three club benefits: the most prominent element of the page. */
.sgh-ref-band { background: var(--sgh-brand-surface); color: var(--sgh-on-brand); padding-block: var(--wp--preset--spacing--80); }
.sgh-ref-band > * { margin-block: 0; }
.sgh-ref-band h2 { max-width: 20ch; margin-bottom: 2rem; color: inherit; -webkit-hyphens: manual; hyphens: manual; }
.sgh-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sgh-on-brand-2); }
.sgh-benefit-grid > .sgh-benefit { margin: 0; padding: 1.5rem 2rem 0 0; }
.sgh-benefit-grid > .sgh-benefit + .sgh-benefit { padding-left: 2rem; border-left: 1px solid var(--sgh-on-brand-line); }
.sgh-benefit > * { margin-block: 0; }
.sgh-benefit .sgh-label { color: var(--sgh-on-brand-2); }
.sgh-benefit-figure { margin-block: .75rem 1rem !important; font: 700 var(--wp--preset--font-size--headline-l)/1.05 var(--wp--preset--font-family--heading); }
.sgh-benefit-figure.is-large { font-size: var(--wp--preset--font-size--display); line-height: 1; font-variant-numeric: tabular-nums; }
.sgh-benefit p:not(.sgh-label):not(.sgh-benefit-figure) { color: var(--sgh-on-brand-2); line-height: 1.55; }
.sgh-ref-section { padding-top: var(--wp--preset--spacing--80); }
.sgh-ref-section > h2 { max-width: 20em; margin: 0 0 var(--wp--preset--spacing--50); }
.sgh-ref-section > p { max-width: var(--sgh-measure); margin-block: 0 1em; }
.sgh-ref-section > .is-style-sgh-steckbrief { max-width: 58rem; margin: 0; }
.sgh-ref-section .is-style-sgh-steckbrief th { width: 11rem; }
/* Steps across the width on large screens. */
.sgh-ref-section .is-style-sgh-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sgh-ref-section .is-style-sgh-schritte > li { padding: 1.25rem 1.5rem 1.5rem 0; line-height: 1.55; }
.sgh-ref-section .is-style-sgh-schritte > li + li { padding-left: 1.5rem; border-left: var(--sgh-hair); }
.sgh-ref-section .is-style-sgh-schritte > li::before { display: block; margin-bottom: .75rem; }
.sgh-ref-section .is-style-sgh-schritte > li > strong { display: block; margin-bottom: .375rem; font: 700 var(--wp--preset--font-size--headline-s)/1.2 var(--wp--preset--font-family--heading); }
.sgh-ref-faq .wp-block-details { max-width: 58rem; }
.sgh-ref-faq summary { font-size: var(--wp--preset--font-size--body); }
.sgh-ref-cta { max-width: 58rem; padding-bottom: 0; }
.sgh-ref-cta > .sgh-label { margin-top: var(--wp--preset--spacing--60); color: var(--wp--preset--color--muted); }

/* ---------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sgh-ref-hero { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--60); }
  .sgh-masthead-grid { display: block; }
  .sgh-masthead .sgh-club-facts { display: none; }
  .sgh-lead-story .wp-block-post, .sgh-club { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .sgh-lead-story .wp-block-post > *, .sgh-club > * { grid-column: auto; }
  .sgh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgh-department-tiles { grid-template-columns: minmax(0, 1fr); }
  .sgh-benefit-grid { grid-template-columns: minmax(0, 1fr); }
  .sgh-benefit-grid > .sgh-benefit, .sgh-benefit-grid > .sgh-benefit + .sgh-benefit { padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid var(--sgh-on-brand-line); }
  .sgh-benefit-grid > .sgh-benefit:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .sgh-sponsors-run { grid-template-columns: minmax(0, 1fr) var(--sgh-h-control); grid-template-areas: "label toggle" "window window"; gap: .25rem .75rem; padding-block: .5rem .75rem; }
  .sgh-sponsors-label { grid-area: label; display: flex; align-items: baseline; gap: .875rem; }
  .sgh-sponsors-label h2 { margin: 0; }
  .sgh-sponsors-window { grid-area: window; }
  .sgh-sponsors-toggle { grid-area: toggle; }
  .sgh-sponsors-list { gap: 2.5rem; padding-right: 2.5rem; --logo-scale: .72; }
  .sgh-sponsors-list a { min-height: 3.25rem; }
}
@media (max-width: 599px) {
  .sgh-masthead { padding-block: 1.5rem 1rem; }
  .sgh-masthead-links { column-gap: 1.25rem; }
  .sgh-tile { min-height: 6rem; padding: 1rem; }
  .sgh-tile-name { font-size: clamp(1.25rem, 6vw, 1.625rem); -webkit-hyphens: auto; hyphens: auto; }
  a.sgh-tile::after { top: 1rem; right: 1rem; }
  .sgh-ref-section .is-style-sgh-schritte { display: block; }
  .sgh-ref-section .is-style-sgh-schritte > li, .sgh-ref-section .is-style-sgh-schritte > li + li { position: relative; padding: 1rem 0 1rem 3.5rem; border-left: 0; border-bottom: var(--sgh-hair); }
  .sgh-ref-section .is-style-sgh-schritte > li::before { position: absolute; left: 0; top: 1rem; margin: 0; font-size: 2rem; }
  .sgh-ref-section .is-style-sgh-steckbrief th { width: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sgh-sponsors-copy, .sgh-sponsors-toggle { display: none !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .sgh-sponsors-run { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .sgh-sponsors-run { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "window"; }
}

/* ===========================================================================
   The pitch is the display (design "Spielfeld", user's choice 11.11.2026; inc/pitch.php, inc/home.php, inc/opponents.php).
   Blue band of the home page and the team pages: name on the left, the club's pitch with the last result on the right.
   Below on the home page: next matches in one row, the lead report with a list, team cells, club and departments.
   Only tokens of the theme; nothing lies over the pitch but the two scores.
   =========================================================================== */
/* Crest beside a team name: the club's own as a picture, an opponent as a short name in an outline. */
.sgh-crest { position: relative; flex: none; display: grid; place-items: center; width: 2.75rem; height: 3rem; }
.sgh-crest img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sgh-crest.is-short { color: var(--sgh-line-strong); }
.sgh-crest.is-short svg { display: block; width: 100%; height: 100%; }
.sgh-crest.is-short b { position: absolute; inset: 0 0 14% 0; display: grid; place-items: center; font: 700 .8125rem/1 var(--wp--preset--font-family--heading); letter-spacing: .01em; color: var(--sgh-ink-2); }
.sgh-crest.is-short b.is-long { font-size: .6875rem; }
/* The last matches as plates in a row, each a link to its report. */
.sgh-form { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; }
.sgh-form a.sgh-score { padding-block: 8px; margin-block: -8px; text-decoration: none; }
.sgh-form .sgh-score-num { font-size: var(--wp--preset--font-size--small); padding: .0625rem .4375rem; }
.sgh-form a.sgh-score:hover .sgh-score-num { outline: 1px solid currentColor; outline-offset: 1px; }
@media (pointer: coarse) { .sgh-form { gap: .375rem; } .sgh-form a.sgh-score { padding-block: 12px; margin-block: -12px; } }

/* ------------------------------------------------------------------ Kopf: Name links, Spielfeld mit Ergebnis rechts */
.sgh-masthead.sgh-pitch { padding-block: 1.5rem 1.125rem; }
/* Pixel-Figur auf Blau: die Farben der dunklen Darstellung (helleres Trikot, helle Hose), damit sie sich abhebt. */
.sgh-pitch { --sgh-px-shirt: #4A52FF; --sgh-px-shorts: #ECEDF3; --sgh-px-boots: #ECEDF3; --sgh-px-ink: #0B0B5E; }
.sgh-pitch-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "id match" "rows match"; column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.sgh-pitch-grid > * { margin: 0; min-width: 0; }
.sgh-pitch-id { grid-area: id; align-self: end; }
.sgh-pitch-id > * { margin-block: 0; }
.sgh-masthead.sgh-pitch h1 { margin-block: .375rem .5rem; font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); }

/* Zeilen auf Blau, wie die Vereinsangaben im bisherigen Kopf. */
.sgh-pitch .sgh-pitch-rows { grid-area: rows; align-self: start; max-width: 30rem; margin: .875rem 0 0; font-size: var(--wp--preset--font-size--small); }
.sgh-pitch .sgh-pitch-rows tr { border-bottom: 1px solid var(--sgh-on-brand-line); }
.sgh-pitch .sgh-pitch-rows tr:first-child { border-top: 1px solid var(--sgh-on-brand-2); }
.sgh-pitch .sgh-pitch-rows th { width: 8.75rem; padding: .4375rem 1rem .4375rem 0; color: var(--sgh-on-brand-2); white-space: nowrap; }
.sgh-pitch .sgh-pitch-rows td { padding: .4375rem 0; line-height: 1.4; }
.sgh-pitch .sgh-pitch-rows .sgh-score .sgh-score-num { background: var(--sgh-on-brand); color: var(--sgh-brand-surface); box-shadow: none; }
.sgh-pitch .sgh-pitch-rows .sgh-score.is-draw .sgh-score-num { background: rgb(255 255 255 / .26); color: var(--sgh-on-brand); }
.sgh-pitch .sgh-pitch-rows .sgh-score.is-loss .sgh-score-num { background: transparent; color: var(--sgh-on-brand); box-shadow: inset 0 0 0 1px var(--sgh-on-brand-2); }
.sgh-pitch .sgh-form a.sgh-score:hover .sgh-score-num { outline-color: var(--sgh-on-brand); }

/* Das Spiel: Heim | Spielfeld | Gast, darunter eine Zeile mit Stempel, Figur und Bericht. */
.sgh-pitch-match { grid-area: match; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem) minmax(0, 1fr); grid-template-areas: "home field away" "foot foot foot"; align-items: center; gap: .5rem 1.25rem; }
.sgh-pitch-match.is-empty { grid-template-areas: ". field ."; }
/* Without a match there is no line below the pitch: keep the room the map credit needs in the corner of the band. */
.sgh-pitch-match.is-empty { padding-bottom: .875rem; }
/* Die Fläche, in die assets/masthead-rings.js das Spielfeld zeichnet (data-box): Seitenverhältnis des um 4,7° gedrehten Felds. */
.sgh-pitch-field { grid-area: field; position: relative; aspect-ratio: 95.41 / 64.77; container-type: size; }
.sgh-pitch-inner { position: absolute; left: 50%; top: 50%; width: 95.38%; height: 88.78%; margin: 0; transform: translate(-50%, -50%) rotate(-4.704deg); }
/* Die Tore stehen in den freien Flächen der beiden Hälften, zwischen Strafraum und Mittelkreis. */
.sgh-pitch-goal { position: absolute; top: 50%; transform: translate(-50%, -52%); font: 700 48cqh/1 var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums; color: var(--sgh-on-brand-2); }
.sgh-pitch-goal.is-home { left: 29.2%; }
.sgh-pitch-goal.is-away { left: 70.8%; }
.sgh-pitch-goal.is-us { color: var(--sgh-on-brand); }
@media (prefers-reduced-motion: no-preference) {
  .sgh-pitch-goal { animation: sgh-goal-in .5s var(--sgh-ease) 1.1s both; }
  .sgh-pitch-goal.is-away { animation-delay: 1.3s; }
}
@keyframes sgh-goal-in { from { opacity: 0; transform: translate(-50%, -44%); } }

.sgh-pitch-side { display: grid; gap: .125rem; min-width: 0; }
.sgh-pitch-side.is-home { grid-area: home; justify-items: end; text-align: right; }
.sgh-pitch-side.is-away { grid-area: away; justify-items: start; }
.sgh-pitch-side .sgh-crest { width: 2.75rem; height: 3rem; margin-bottom: .375rem; }
.sgh-pitch .sgh-crest.is-short { color: var(--sgh-on-brand-2); }
.sgh-pitch .sgh-crest.is-short path { fill: transparent; }
.sgh-pitch .sgh-crest.is-short b { color: var(--sgh-on-brand); }
.sgh-pitch-role { 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-pitch-name { font: 600 var(--wp--preset--font-size--headline-s)/1.15 var(--wp--preset--font-family--heading); color: var(--sgh-on-brand-2); text-wrap: balance; }
.sgh-pitch-side.is-us .sgh-pitch-name { font-weight: 700; color: var(--sgh-on-brand); }
.sgh-pitch-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem; min-height: 2rem; margin: 0; font-size: var(--wp--preset--font-size--meta); line-height: 1.3; color: var(--sgh-on-brand-2); }
.sgh-pitch-foot a { display: inline-block; padding-block: 8px; margin-block: -8px; font-weight: 700; text-decoration: none; }
.sgh-pitch-foot a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.sgh-pitch-figure { display: block; align-self: flex-end; }
.sgh-pitch-figure .sgh-result-figure { width: 24px; height: 32px; }
.is-win .sgh-pitch-figure .sgh-result-figure { animation: sgh-hop .5s steps(2, jump-none) 4; }
/* Stempel auf Blau: Sieg weiß gefüllt, Unentschieden halb, Niederlage umrandet. */
.sgh-pitch-stamp { --c: 3px; display: inline-block; padding: .35em .6em .3em; font: 700 var(--wp--preset--font-size--label)/1 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase; background: var(--sgh-on-brand); color: var(--sgh-brand-surface);
  clip-path: polygon(0 var(--c), var(--c) var(--c), var(--c) 0, calc(100% - var(--c)) 0, calc(100% - var(--c)) var(--c), 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, var(--c) calc(100% - var(--c)), 0 calc(100% - var(--c))); }
.is-draw > .sgh-pitch-foot .sgh-pitch-stamp { background: rgb(255 255 255 / .26); color: var(--sgh-on-brand); }
.is-loss > .sgh-pitch-foot .sgh-pitch-stamp { background: transparent; color: var(--sgh-on-brand); box-shadow: inset 0 0 0 1px var(--sgh-on-brand-2); clip-path: none; }

@media (max-width: 1099px) {
  /* Namen unter die beiden Hälften: links Heim, rechts Gast. */
  .sgh-pitch-match { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "field field" "home away" "foot foot"; gap: .5rem 1rem; }
  .sgh-pitch-match.is-empty { grid-template-areas: "field field"; }
  .sgh-pitch-side { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .625rem; }
  .sgh-pitch-side.is-home { justify-items: start; text-align: left; }
  .sgh-pitch-side.is-away { grid-template-columns: minmax(0, 1fr) auto; justify-items: end; text-align: right; }
  .sgh-pitch-side.is-away .sgh-crest { order: 2; grid-row: 1 / span 2; grid-column: 2; }
  .sgh-pitch-side.is-home .sgh-crest { grid-row: 1 / span 2; }
  .sgh-pitch-side .sgh-crest { width: 2.25rem; height: 2.5rem; margin: 0; }
  .sgh-pitch-name { font-size: var(--wp--preset--font-size--body); }
  .sgh-pitch .sgh-pitch-rows th { width: 6.75rem; }
}
/* Mittlere Breiten (auch halbe Monitorbreite): das Spielfeld wird nicht größer als am Rechner, der Kopf bleibt niedrig. */
@media (min-width: 760px) and (max-width: 1099px) { .sgh-pitch-field { width: min(100%, 23rem); justify-self: center; } }
@media (max-width: 759px) {
  .sgh-masthead.sgh-pitch { padding-block: 1.25rem 1rem; }
  /* Mit Ergebnis enden die Zeilen mit den Plaketten „Letzte fünf“ am Fuß des Kopfes: Der Kartenhinweis bekommt darunter eine
     eigene Zeile, sonst läge er im unteren Rand ihrer Tippfläche. */
  .sgh-masthead.sgh-pitch.has-match { padding-bottom: 1.875rem; }
  .sgh-pitch-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "match" "rows"; row-gap: .875rem; }
  .sgh-masthead.sgh-pitch h1 { font-size: 1.75rem; margin-block: .25rem; }
  /* Mit Ergebnis stehen die beiden Wege im Menü; der Kopf bleibt kurz. */
  .sgh-pitch.has-match .sgh-masthead-links { display: none; }
  .sgh-pitch .sgh-pitch-rows { max-width: none; margin-top: 0; }
  .sgh-pitch .sgh-pitch-rows th { width: 6.5rem; }
  /* Ohne Ergebnis (Sommerpause) bleibt der Kopf so kurz wie heute: das Spielfeld steht rechts neben dem Namen, ohne die Zeilen. */
  .sgh-pitch:not(.has-match) .sgh-pitch-match { position: absolute; top: 3.75rem; right: var(--sgh-gutter); width: 8rem; display: block; }
  .sgh-pitch:not(.has-match) .sgh-pitch-rows { display: none; }
  .sgh-masthead.sgh-pitch:not(.has-match) h1 { max-width: calc(100% - 8.75rem); font-size: 2.25rem; margin-block: .5rem 1rem; }
  /* Fußzeile des Spiels: links Figur, Stempel und Datum, rechts der Bericht. */
  .sgh-pitch-foot { justify-content: flex-start; gap: .25rem .5rem; }
  .sgh-pitch-foot a { margin-left: auto; }
}

/* ------------------------------------------------------------------ Nächste Spiele: eine Zeile unter dem Kopf */
.sgh-home > .sgh-masthead:has(+ .sgh-next) { margin-bottom: 0; }
.sgh-next { display: grid; grid-template-columns: auto minmax(0, 1fr); margin-bottom: var(--wp--preset--spacing--60); border-bottom: var(--sgh-hair); }
.sgh-next-title { display: flex; flex-direction: column; justify-content: flex-start; gap: .125rem; margin: 0; padding: .75rem 1.5rem .75rem 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--custom--color--link); }
.sgh-next-title span { font-weight: 600; letter-spacing: .06em; color: var(--wp--preset--color--muted); }
.sgh-next-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.sgh-next-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: .0625rem .75rem; min-width: 0; padding: .75rem 1.25rem; border-left: var(--sgh-hair); font-size: var(--wp--preset--font-size--meta); line-height: 1.35; }
.sgh-next-list time { color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.sgh-next-list time b { font-family: var(--wp--preset--font-family--heading); font-size: 1rem; color: var(--wp--preset--color--ink); }
.sgh-next-team { justify-self: end; font: 700 var(--wp--preset--font-size--label)/1.5 var(--wp--preset--font-family--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--custom--color--link); white-space: nowrap; }
.sgh-next-pair { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--ink); }
.sgh-next-meta { grid-column: 1 / -1; color: var(--wp--preset--color--muted); }
/* Pokalspiel: Pokal-Symbol und der Name des Wettbewerbs in der Akzentfarbe; „Heimspiel“ dahinter bleibt, wie es ist. */
.sgh-next-cup { font-weight: 700; color: var(--sgh-accent); }
.sgh-next-cup svg { width: 1em; height: 1em; margin-right: .3em; vertical-align: -.125em; }
.sgh-next-list:focus-visible { outline-offset: -2px; }
@media (max-width: 1023px) {
  .sgh-next { grid-template-columns: minmax(0, 1fr); }
  .sgh-next-title { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: .5rem; padding: .75rem 0 .25rem; }
  /* Seitlich blättern: die nächste Karte schaut hervor. */
  .sgh-next-list { grid-auto-columns: min(15.5rem, 72%); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .sgh-next-list > li { scroll-snap-align: start; padding: .625rem 1rem .75rem; }
  .sgh-next-list > li:first-child { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------------------ Seite dichter: kleinere Abstände zwischen den Abschnitten */
/* The gap of the approved design (the former step 70), kept when the spacing steps of the whole site became smaller (0.59.0). */
.sgh-home .sgh-home-section { margin-bottom: clamp(2rem, 1.4rem + 2.6vw, 3rem); }

/* Aktuelles: Aufmacher links, fünf weitere Berichte als Liste rechts. */
.sgh-home-news { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(2 * var(--wp--preset--spacing--50)); padding-top: var(--wp--preset--spacing--50); }
.sgh-home-lead a { display: block; color: inherit; text-decoration: none; }
.sgh-home-lead-img { margin: 0 0 .875rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wp--preset--color--tint); }
.sgh-home-lead-img img, .sgh-home-list-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--sgh-focus, 50% 50%); }
.sgh-home-lead-title { margin: .375rem 0 .5rem; font: 700 clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem)/1.04 var(--wp--preset--font-family--heading); letter-spacing: -.01em; }
.sgh-home-lead-text { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; color: var(--sgh-ink-2); }
.sgh-home-lead a:hover .sgh-home-lead-title, .sgh-home-list a:hover .sgh-home-list-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.sgh-home-lead a:focus-visible, .sgh-home-list a:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .sgh-home-lead-img img { transition: transform .5s var(--sgh-ease); }
  .sgh-home-lead a:hover .sgh-home-lead-img img { transform: scale(1.02); }
}
.sgh-home-list { position: relative; margin: 0; padding: 0; list-style: none; }
.sgh-home-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--wp--preset--spacing--50)); border-left: var(--sgh-hair); }
.sgh-home-list li + li { border-top: var(--sgh-hair); }
.sgh-home-list a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-block: .875rem; color: inherit; text-decoration: none; }
.sgh-home-list li:first-child a { padding-top: 0; }
.sgh-home-list li:last-child a { padding-bottom: 0; }
.sgh-home-list-img { aspect-ratio: 4 / 3; height: auto; }
.sgh-home-list-text { display: grid; gap: .25rem; min-width: 0; }
.sgh-home-list-title { font: 700 1.3125rem/1.15 var(--wp--preset--font-family--heading); text-wrap: balance; }
.sgh-home-list .sgh-score-word { display: none; }
@media (max-width: 899px) {
  .sgh-home-news { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .sgh-home-list::before { content: none; }
  .sgh-home-list { border-top: var(--sgh-hair); }
  .sgh-home-list li:first-child a { padding-top: .875rem; }
}
@media (max-width: 599px) { .sgh-home-list a { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .875rem; } .sgh-home-list-title { font-size: 1.1875rem; } }

/* Mannschaften: fünf schmale Felder je Reihe, mit Spielklasse oder Jahrgängen. */
.sgh-team-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-left: var(--sgh-hair); }
.sgh-team-cells > li { min-width: 0; border-right: var(--sgh-hair); border-bottom: var(--sgh-hair); }
.sgh-team-cell { position: relative; display: grid; align-content: start; gap: .125rem; height: 100%; min-height: 5.5rem; padding: .875rem 2.25rem .875rem 1rem; color: inherit; text-decoration: none; transition: background-color var(--sgh-dur-1) var(--sgh-ease); }
.sgh-team-cell::after { content: "→"; position: absolute; top: .875rem; right: 1rem; font-weight: 600; color: var(--wp--custom--color--link); }
.sgh-team-cell-group { 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); }
.sgh-team-cell-name { font: 700 1.5rem/1.1 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); }
.sgh-team-cell-info { font-size: var(--wp--preset--font-size--meta); line-height: 1.35; color: var(--wp--preset--color--muted); }
@media (hover: hover) { .sgh-team-cell:hover { background: var(--wp--preset--color--tint); } .sgh-team-cell:hover .sgh-team-cell-name { color: var(--wp--custom--color--link); } }
.sgh-team-cell:focus-visible { outline-offset: -2px; }
@media (max-width: 1023px) { .sgh-team-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sgh-team-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sgh-team-cell { min-height: 4.75rem; padding: .75rem 2rem .75rem .875rem; } .sgh-team-cell-name { font-size: 1.3125rem; } }

/* Verein und Abteilungen in einer Reihe: Bild, Text, Wege (zwei Listen nebeneinander). */
.sgh-home-club { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); align-items: start; padding-top: var(--wp--preset--spacing--50); }
.sgh-home-club > * { margin: 0; min-width: 0; }
.sgh-home-club-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sgh-home-club-photo figcaption { margin-top: .5rem; text-align: left; font-size: var(--wp--preset--font-size--meta); line-height: 1.5; color: var(--wp--preset--color--muted); }
.sgh-home-club-text > * { margin-block: 0 .875rem; }
.sgh-home-club-text > :last-child { margin-bottom: 0; }
.sgh-home-club-text h3 { font-size: var(--wp--preset--font-size--headline-m); line-height: 1.12; }
.sgh-home-club-text p { line-height: 1.55; color: var(--sgh-ink-2); }
.sgh-home-club-ways { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 1.5rem; align-items: start; }
.sgh-home-club-ways .sgh-label { margin: 0 0 .25rem; padding-top: .625rem; border-top: var(--sgh-rule); }
.sgh-home-club-ways .sgh-link-list { margin: 0; }
@media (max-width: 1023px) { .sgh-home-club { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .sgh-home-club-ways { grid-column: 1 / -1; } }
@media (max-width: 599px) { .sgh-home-club { grid-template-columns: minmax(0, 1fr); } .sgh-home-club-ways { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; } }

/* Nur auf breiten Bildschirmen. */
@media (max-width: 759px) { .sgh-wide-only { display: none; } }

/* ------------------------------------------------------------------ Dieselbe Anzeige als Kopf einer Mannschaftsseite */
.sgh-team-page > .sgh-masthead.sgh-pitch { margin-bottom: var(--wp--preset--spacing--60); }
.sgh-pitch.is-team .sgh-back { margin: 0 0 .25rem; }
.sgh-pitch.is-team .sgh-back a { text-decoration: none; }
.sgh-masthead.sgh-pitch.is-team h1 { margin-block: 0 .375rem; font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1; }
.sgh-pitch.is-team .sgh-label { margin: 0; }

/* ------------------------------------------------------------------ Auswärtsspiel: unser Kartenbild gewendet (gespiegelt), der Platz neigt sich zur anderen Seite */
.sgh-pitch-field.is-mirrored .sgh-pitch-inner { transform: translate(-50%, -50%) rotate(4.704deg); }

/* ------------------------------------------------------------------ Hochzählen (g-zaehlen.js): bis zum letzten Tor bleibt das Ergebnis offen */
.sgh-pitch-minute { min-width: 5.5em; 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); }
.sgh-pitch-minute:empty { display: none; }
.sgh-counting .sgh-pitch-match[data-goals] .sgh-pitch-stamp { display: none; }
.sgh-pitch-goal.is-scored { animation: sgh-goal-drop .34s cubic-bezier(.3, 1.5, .6, 1) both; }
@keyframes sgh-goal-drop { from { opacity: .2; transform: translate(-50%, -64%); } }
.sgh-pitch-match.is-decided .sgh-pitch-stamp { animation: sgh-stamp .5s cubic-bezier(.2, .9, .3, 1.25) both; }
.sgh-counting .is-fresh { visibility: hidden; }
/* Ohne laufendes Skript nichts verraten, aber auch nichts für immer verstecken: nach 4 s steht der Endstand da. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  :root:not(.sgh-counted) .sgh-pitch-match[data-goals]:not(.is-ready) :is(.sgh-pitch-goal, .sgh-pitch-stamp), :root:not(.sgh-counted):not(.sgh-counting) .is-fresh { visibility: hidden; animation: sgh-unveil 0s 4s both; }
  .sgh-pitch-match[data-goals].is-ready .sgh-pitch-goal { animation: none; }
  .sgh-pitch-match[data-goals].is-ready .sgh-pitch-goal.is-scored { animation: sgh-goal-drop .34s cubic-bezier(.3, 1.5, .6, 1) both; }
}

/* ------------------------------------------------------------------ Weitere Zustände des Spiels */
/* Zweistelliges Ergebnis: beide Zahlen kleiner, damit die zweistellige zwischen Strafraum und Mittelkreis passt. */
.sgh-pitch-field.has-double .sgh-pitch-goal { font-size: 27cqh; }
/* Saisonbeginn: Es gibt ein nächstes Spiel, aber noch kein Ergebnis. In den Hälften stehen Tag und Anstoß, klein und zweizeilig,
   damit sie nicht wie ein Ergebnis aussehen. */
.sgh-pitch-kick { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .3em; font: 700 10.5cqh/1 var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sgh-on-brand); }
.sgh-pitch-kick small { font: 700 5.8cqh/1 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--sgh-on-brand-2); }
.sgh-pitch-kick.is-home { left: 28%; }
.sgh-pitch-kick.is-away { left: 72%; }
.sgh-pitch-mark { 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); }
/* Am Handy stehen die Vereinsangaben nicht unter einem Spiel; sie stehen weiter unten auf der Seite. */
@media (max-width: 759px) { .sgh-pitch.has-match .sgh-pitch-rows.is-club { display: none; } }

/* Blocks in a section of the home page follow its bar directly; the block layout would add its own gap. */
.sgh-home-section > :is(.sgh-home-news, .sgh-home-club, .sgh-team-cells) { margin-top: 0; }
.sgh-home-club-ways > * { margin: 0; }
/* A short band without a match (a team page with a one-line title): high enough for the small pitch and the map credit below it. */
@media (max-width: 759px) { .sgh-masthead.sgh-pitch:not(.has-match) { min-height: 11rem; } }
/* A report without a picture keeps its place in the list. */
.sgh-home-list-img.is-empty { display: block; aspect-ratio: 4 / 3; background: var(--wp--preset--color--tint); }
/* The figure cheers or hangs its head: it would give the result away, so it waits for the count like the outcome. */
.sgh-counting .sgh-pitch-match[data-goals] .sgh-pitch-figure { visibility: hidden; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  :root:not(.sgh-counted) .sgh-pitch-match[data-goals]:not(.is-ready) .sgh-pitch-figure { visibility: hidden; animation: sgh-unveil 0s 4s both; }
}