/*
Theme Name: GSG Stuttgart Relaunch
Theme URI: https://fussball.gsg-stuttgart.de
Author: GSG Stuttgart – Abteilung Fußball
Description: Barrierefreies Block-Theme (WCAG 2.2 AA) in den Vereinsfarben Gelb und Schwarz. Fixierte Kopfzeile, Handy-Menü, Schriften lokal eingebunden (DSGVO).
Version: 1.2.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gsg-relaunch
Tags: block-theme, full-site-editing, accessibility-ready, custom-colors
*/

/* ---------- Grundlagen ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #111111; outline-offset: 2px; box-shadow: 0 0 0 6px #FFD200;
}
.skip-link.screen-reader-text:focus { background: #FFD200; color: #111111; font-weight: 600; }
img { height: auto; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
html { scroll-padding-top: 140px; }

strong, b { font-weight: 600; }
.gsg-fusszeile h2 { font-weight: 500; }

/* ---------- Fixierte Kopfzeile ---------- */
.gsg-sticky { position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.admin-bar .gsg-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .gsg-sticky { top: 46px; } }
@media (max-width: 600px) { .admin-bar .gsg-sticky { top: 0; } }

.gsg-servicezeile { font-size: 1rem; padding: .25rem max(20px, calc((100% - 1200px) / 2)); gap: .25rem 1.5rem; }
.gsg-servicezeile p { margin: 0; }
.gsg-servicezeile a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.gsg-servicezeile a:hover { text-decoration: underline; color: #fff; }
.gsg-servicezeile .gsg-dgs-link a { color: #FFD200; font-weight: 500; }

.gsg-hauptkopf { padding: .75rem max(20px, calc((100% - 1200px) / 2)); border-bottom: 6px solid #FFD200; gap: 1rem; }
.gsg-marke { gap: .85rem; }
.gsg-logo { margin: 0; }
.gsg-logo img { width: 64px; height: 64px; display: block; }
.gsg-marke p { margin: 0; line-height: 1.1; }
.gsg-marke .gsg-vereinsname { font-family: var(--wp--preset--font-family--titel); font-weight: 600; font-size: 1.4rem; }
.gsg-marke .gsg-vereinsname a { color: #fff; text-decoration: none; }
.gsg-marke .gsg-untertitel { font-size: .95rem; color: #D9D9D9; }

.gsg-menue { font-weight: 500; }
.gsg-menue .wp-block-navigation-item__content { padding: .55rem .9rem; border-radius: 8px; text-decoration: none; }
.gsg-menue .wp-block-navigation-item__content:hover { text-decoration: underline; }
.gsg-menue .current-menu-item > .wp-block-navigation-item__content,
.gsg-menue [aria-current="page"],
.gsg-menue .current-menu-ancestor > .wp-block-navigation-item__content,
.gsg-menue .wp-block-navigation-item__content.current-menu-ancestor { background: #FFD200; color: #111111 !important; }
.gsg-menue .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content { box-shadow: inset 0 0 0 2px #FFD200; color: #FFD200; }
.gsg-menue .wp-block-navigation__submenu-container { background: #111111 !important; border: 2px solid #FFD200 !important; border-radius: 8px; padding: .4rem; }
.gsg-menue .wp-block-navigation__responsive-container-open { background: #FFD200; color: #111111; border-radius: 8px; padding: .6rem; }
.gsg-menue .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.gsg-menue .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.35rem; }
/* Menüpunkte nie umbrechen – auch nicht „Teams“ mit Untermenü-Pfeil.
   Neuere WordPress-Versionen erlauben Umbruch mitten im Wort und lassen den Punkt schrumpfen; das wird hier verhindert. */
.gsg-menue .wp-block-navigation__container > .wp-block-navigation-item { flex: 0 0 auto !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
.gsg-menue .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  flex: 0 0 auto !important; width: auto !important; min-width: max-content !important;
}
.gsg-menue .wp-block-navigation-item__content, .gsg-menue .wp-block-navigation-item__label {
  white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important;
}
.gsg-menue .wp-block-navigation__submenu-icon { flex: 0 0 auto; margin-left: .1rem; }
/* Auffangregel für alle WordPress-Versionen: egal wie der Menüpunkt intern aufgebaut ist,
   nichts in der obersten Menüebene darf schrumpfen oder umbrechen. */
.gsg-menue .wp-block-navigation__container > li,
.gsg-menue .wp-block-navigation__container > li > *:not(.wp-block-navigation__submenu-container),
.gsg-menue .wp-block-navigation__container > li > *:not(.wp-block-navigation__submenu-container) * {
  flex-shrink: 0 !important; min-width: max-content !important; max-width: none !important;
  white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important;
}
.gsg-menue .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: normal; }
/* Mittlere Breiten: etwas enger, damit Logo und Menü öfter in eine Zeile passen */
@media (min-width: 600px) and (max-width: 1180px) {
  .gsg-menue .wp-block-navigation-item__content { padding: .5rem .6rem; }
  .gsg-menue .wp-block-navigation__container { gap: .15rem; }
}

@media (max-width: 600px) {
  .gsg-servicezeile { justify-content: center !important; font-size: .95rem; gap: 0 1.25rem; }
  .gsg-servicezeile .gsg-nur-desktop { display: none; }
  .gsg-logo img { width: 48px; height: 48px; }
  .gsg-marke .gsg-vereinsname { font-size: 1.4rem; }
}

/* ---------- Abschnitte ---------- */
.gsg-hero { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.gsg-hero-spalten { align-items: center; gap: 3rem; }
.gsg-dachzeile { color: #FFD200; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.gsg-einleitung { font-size: 1.25rem; max-width: 46rem; }
.gsg-hero .gsg-einleitung { color: #E6E6E6; }
.gsg-abschnitt { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.gsg-spieltag { margin-top: -2.5rem !important; position: relative; }
.gsg-hero + .gsg-spieltag { margin-top: -2.5rem !important; }
.gsg-mehr { font-weight: 500; }
.gsg-klein-titel { font-family: var(--wp--preset--font-family--text) !important; font-size: 1.25rem !important; color: #4A4A4A; text-align: center; }

.gsg-karte { background: #fff; border: 2px solid #111111; border-radius: 12px; padding: 1.5rem 1.75rem; box-sizing: border-box; }
.gsg-karte > *:first-child { margin-top: 0; }
.gsg-label { font-size: .9rem; font-weight: 500; color: #4A4A4A; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.gsg-begegnung { font-family: var(--wp--preset--font-family--titel); font-weight: 600; font-size: 1.6rem; line-height: 1.25; margin: .25rem 0; }
.gsg-ergebnis { background: #FFD200; color: #111111; padding: 0 .5rem; border-radius: 8px; }

.gsg-zahlkarte { border-radius: 12px; padding: 1.5rem; box-sizing: border-box; }
.gsg-zahl { font-family: var(--wp--preset--font-family--titel); font-size: 3.25rem; font-weight: 600; line-height: 1; color: #FFD200; margin: 0; }
.gsg-zahlkarte p { margin: .5rem 0 0; }

.gsg-teamkarte { border: 2px solid #111111; border-radius: 12px; padding: 1.5rem; box-sizing: border-box; }
.gsg-teamkarte h3 { margin: 0 0 .4rem; font-size: 1.35rem; }
.gsg-teamkarte h3 a { text-decoration: none; }
.gsg-teamkarte h3 a::after { content: " →"; }
.gsg-teamkarte p { color: #4A4A4A; margin: 0; }

.gsg-platzhalter { background: #F2F2EE; border: 2px dashed #8A8A8A; border-radius: 12px; min-height: 120px; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.25rem; color: #4A4A4A; font-size: 1rem; box-sizing: border-box; }
.gsg-platzhalter--dunkel { background: #262626; border-color: #6A6A6A; color: #E6E6E6; }
.gsg-person .gsg-platzhalter { aspect-ratio: 1 / 1; border-radius: 50%; max-width: 140px; margin: 0 auto; }
.gsg-person { text-align: center; border: 1px solid #D6D6D6; border-radius: 12px; padding: 1.5rem 1rem; box-sizing: border-box; }

.gsg-infokasten { border-radius: 12px; padding: 1.5rem; }
.gsg-infokasten h2 { color: #FFD200; font-size: 1.35rem; margin-top: 0; }
.gsg-infokasten a:not(.wp-block-button__link) { color: #fff; }
.gsg-formularkasten { border-radius: 12px; padding: 1.75rem; }
.gsg-aufruf { border-radius: 12px; padding: 1.75rem; }
.gsg-hinweis { font-size: .95rem; color: #4A4A4A; }
.gsg-sprungliste { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; font-weight: 500; }
.gsg-leicht { font-size: 1.3rem; line-height: 1.75; max-width: 46rem; }
.gsg-leicht p { margin: .4rem 0; }

/* Tabellen: auf dem Handy seitlich wischen */
.gsg-tabelle { overflow-x: auto; border: 1px solid #D6D6D6; border-radius: 12px; }
.gsg-tabelle table { min-width: 560px; border-collapse: collapse; width: 100%; }
.gsg-tabelle th { background: #111111; color: #fff; text-align: left; }
.gsg-tabelle th, .gsg-tabelle td { padding: .8rem 1.1rem; border: 0; border-top: 1px solid #D6D6D6; }
.gsg-tabelle figcaption { text-align: left; padding: .5rem 1.1rem; font-size: .95rem; color: #4A4A4A; }

/* Aktuelles: Beitragskarten */
.gsg-news-filter { gap: .5rem !important; margin-bottom: 1.5rem; align-items: center; }
.gsg-news-filter p { margin: 0; }
.gsg-news-kategorien { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.gsg-news-alle a, .gsg-news-kategorien a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; box-sizing: border-box;
  border: 2px solid #8A8A8A; border-radius: 999px; background: #fff; color: #111111; text-decoration: none; font-weight: 500;
}
.gsg-news-alle a:hover, .gsg-news-kategorien a:hover { border-color: #111111; text-decoration: underline; }
.gsg-news-alle a, .gsg-news-kategorien .current-cat a { background: #111111; border-color: #111111; color: #FFD200; }
body.category .gsg-news-alle a { background: #fff; border-color: #8A8A8A; color: #111111; }

.wp-block-post-template.gsg-news {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  gap: 1.5rem !important; list-style: none; padding: 0; margin: 0 0 2.5rem;
}
.gsg-news > li { margin: 0 !important; display: flex; }
.gsg-news-karte {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid #D6D6D6; border-radius: 14px; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gsg-news-karte:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.gsg-news-karte:focus-within { outline: 3px solid #111111; outline-offset: 2px; box-shadow: 0 0 0 6px #FFD200; }
.gsg-news-bild { margin: 0 !important; }
.gsg-news-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Ohne Beitragsbild: schwarze Fläche mit Vereinslogo */
.gsg-news-ohnebild {
  display: none; aspect-ratio: 16 / 10; margin: 0 !important;
  background: #111111 url(assets/images/gsg-logo.png) center / 34% no-repeat;
  border-bottom: 6px solid #FFD200;
}
.gsg-news-karte:not(:has(.gsg-news-bild)) .gsg-news-ohnebild { display: block; }
.gsg-news-text { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.4rem 1.5rem; flex: 1; }
.gsg-news-text > * { margin: 0 !important; }
.gsg-news-meta { gap: .5rem .9rem !important; align-items: center; font-size: .9rem; }
.gsg-news-meta > * { margin: 0 !important; }
.gsg-news-kat { position: relative; z-index: 2; }
.gsg-news-kat a { display: inline-block; padding: .15rem .65rem; border-radius: 999px; background: #FFD200; color: #111111; text-decoration: none; font-weight: 500; }
.gsg-news-kat a:hover { text-decoration: underline; }
.gsg-news-kat .wp-block-post-terms__separator { display: none; }
.gsg-news-kat a + a { margin-left: .35rem; }
.gsg-news-datum { color: #4A4A4A; }
.gsg-news-titel { font-family: var(--wp--preset--font-family--text) !important; font-size: 1.3rem !important; font-weight: 600; line-height: 1.3; }
.gsg-news-titel a { text-decoration: none; color: #111111; }
.gsg-news-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gsg-news-karte:hover .gsg-news-titel a { text-decoration: underline; }
.gsg-news-auszug { color: #4A4A4A; font-size: 1rem; line-height: 1.55; }
.gsg-news-auszug .wp-block-post-excerpt__more-text { display: none; }
/* Erste Karte groß (nur auf der ersten Seite) */
@media (min-width: 900px) {
  body:not(.paged) .gsg-news > li:first-child { grid-column: 1 / -1; }
  body:not(.paged) .gsg-news > li:first-child .gsg-news-karte { display: grid; grid-template-columns: 1.35fr 1fr; }
  body:not(.paged) .gsg-news > li:first-child .gsg-news-bild,
  body:not(.paged) .gsg-news > li:first-child .gsg-news-ohnebild { aspect-ratio: 16 / 10; height: 100%; border-bottom: 0; }
  body:not(.paged) .gsg-news > li:first-child .gsg-news-text { justify-content: center; padding: 2rem 2.25rem; }
  body:not(.paged) .gsg-news > li:first-child .gsg-news-titel { font-size: 1.9rem !important; }
  body:not(.paged) .gsg-news > li:first-child .gsg-news-auszug { font-size: 1.1rem; }
}
/* Seitennavigation */
.gsg-news-seiten { gap: .5rem !important; margin-bottom: 1rem; }
.gsg-news-seiten a, .gsg-news-seiten .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 1rem;
  border: 2px solid #8A8A8A; border-radius: 999px; text-decoration: none; color: #111111; font-weight: 500; box-sizing: border-box;
}
.gsg-news-seiten .page-numbers.current { background: #111111; border-color: #111111; color: #FFD200; }
.gsg-news-seiten a:hover { border-color: #111111; text-decoration: underline; }
.gsg-news-seiten .page-numbers.dots { border: 0; }
/* Einzelner Beitrag */
.gsg-beitrag-kopf { padding-top: 1.5rem; }
.gsg-beitrag-kopf > * { margin-top: 0 !important; }
.gsg-zurueck { margin-bottom: 1rem !important; }
.gsg-beitrag-titel { font-size: clamp(2rem, 4.5vw, 3rem) !important; margin: .75rem 0 1.5rem !important; }
.gsg-beitrag-bild img { border-radius: 14px; }
.gsg-beitrag-inhalt { font-size: 1.15rem; line-height: 1.75; padding-top: 1rem; }
.gsg-beitrag-fuss { margin-top: 2.5rem !important; }
@media (prefers-reduced-motion: reduce) { .gsg-news-karte { transition: none; } .gsg-news-karte:hover { transform: none; } }

/* Neuigkeiten */
.gsg-newsliste .wp-block-post-featured-image { margin-bottom: .6rem; }
.gsg-newsliste .wp-block-post-featured-image img { border-radius: 12px; }
.gsg-datum { font-size: .95rem; color: #4A4A4A; }
.gsg-newsliste .wp-block-post-title { font-family: var(--wp--preset--font-family--text); font-weight: 500; font-size: 1.25rem; line-height: 1.3; margin: .25rem 0; }
.gsg-newsliste .wp-block-post-title a { text-decoration: none; }
.gsg-newsliste .wp-block-post-title a:hover { text-decoration: underline; }

/* Breite: Abschnitte der Startseite nutzen die volle Seitenbreite (1200 px) statt der schmalen Textbreite */
.gsg-hero.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
.gsg-abschnitt.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
.gsg-spieltag.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
  max-width: var(--wp--style--global--wide-size, 1200px);
}
.gsg-hero-spalten { width: 100%; }
@media (min-width: 782px) {
  .gsg-hero-spalten > .wp-block-column { flex: 1 1 0; min-width: 0; }
}
.wp-block-column > .gsg-platzhalter { width: 100%; }

/* Gleich hohe Karten nur, wenn die Karte allein in ihrer Spalte steht */
.wp-block-column > .gsg-karte:only-child, .wp-block-column > .gsg-zahlkarte:only-child,
.wp-block-column > .gsg-teamkarte:only-child, .wp-block-column > .gsg-person:only-child { height: 100%; }

/* Kein Leerraum zwischen Kopfzeile, Inhalt und Fußzeile */
.wp-site-blocks > * { margin-block-start: 0; }
body:not(.home) main.wp-block-group { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Einleitungen und Leichte Sprache linksbündig statt mittig */
.wp-block-post-content > .gsg-einleitung, .wp-block-post-content > .gsg-leicht,
.wp-block-post-content > .gsg-sprungliste { margin-left: 0 !important; margin-right: auto !important; }
.gsg-infokasten h2 + p + h2, .gsg-infokasten p + h2 { margin-top: 1.75rem; }
@media (max-width: 781px) { .gsg-spieltag, .gsg-hero + .gsg-spieltag { margin-top: 1.5rem !important; } }
.gsg-abschnitt .wp-block-columns { gap: 1.5rem; }
.gsg-abschnitt h2 { margin-bottom: 1.5rem; }

/* Seitenkopf */
.gsg-seitenkopf { padding-top: 2rem; }

/* Fußzeile */
.gsg-fusszeile { border-top: 6px solid #FFD200; padding: 3rem max(20px, calc((100% - 1200px) / 2)) 2rem; }
.gsg-fusszeile h2 { font-family: var(--wp--preset--font-family--text); color: #FFD200; font-size: 1.15rem; margin: 0 0 .5rem; }
.gsg-fusszeile p { margin: .2rem 0; }
.gsg-fusszeile a { color: #fff; }
.gsg-copyright { border-top: 1px solid #333; margin-top: 2rem !important; padding-top: 1rem; font-size: .95rem; color: #BFBFBF; }