/* SV Gallmannsweil: Kopf, Fuß und Startseite. Hell, Gelb und Schwarz aus dem Wappen, Montserrat wie bisher.
   Alles mit sv- vorne, damit sich nichts mit dem alten Theme der Unterseiten beißt. */
:root {
  --sv-gelb: #e7d509;
  --sv-schwarz: #0b0b0b;
  --sv-text: #1a1a1a;
  --sv-text-leise: #4a4a46;
  --sv-linie: #e3e3e0;
  --sv-flaeche: #f6f5f1;
  --sv-weiss: #ffffff;
  --sv-sieg: #1f6b3a;
  --sv-niederlage: #8a2a1e;
  --sv-remis: #4a4a46;
  --sv-breite: 1240px;
  --sv-schrift: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sv-kopf, .sv-kopf *, .sv-fuss, .sv-fuss *, .sv-start, .sv-start * { box-sizing: border-box; }
body.sv-neu { margin: 0; background: var(--sv-weiss); min-height: 100vh; display: flex; flex-direction: column; }
body.sv-neu > main { flex: 1 0 auto; }
body.sv-alt #page-container { min-height: 100vh; display: flex; flex-direction: column; }
body.sv-alt #wrapper { flex: 1 0 auto; display: flex; flex-direction: column; }
body.sv-alt #wrapper > .content-container { flex: 1 0 auto; padding-bottom: 64px; }
.sv-rahmen { width: 100%; max-width: var(--sv-breite); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sv-unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sv-sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--sv-schwarz); color: var(--sv-weiss) !important; padding: 10px 16px; font: 700 15px/1.2 var(--sv-schrift); text-decoration: none; border-radius: 4px; }
.sv-sprung:focus { top: 12px; }

/* ---------- Kopf: hell, läuft beim Scrollen nicht mit ---------- */
.sv-kopf { position: relative; z-index: 1000; background: var(--sv-weiss); border-top: 4px solid var(--sv-gelb); border-bottom: 1px solid var(--sv-linie); font-family: var(--sv-schrift); font-size: 16px; color: var(--sv-text); line-height: 1.4; }
.sv-kopf a { color: var(--sv-text); text-decoration: none; }
.sv-kopf ul { list-style: none; margin: 0; padding: 0; }
.sv-kopf li { margin: 0; padding: 0; list-style: none; }
.sv-kopf li::before, .sv-kopf li::after { content: none; }
.sv-kopf button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; }
.sv-kopf svg { display: block; }
.sv-kopf :focus-visible { outline: 3px solid var(--sv-schwarz); outline-offset: 2px; border-radius: 2px; }
.sv-kopf-innen { display: flex; align-items: center; gap: 16px; min-height: 88px; }

.sv-marke { display: flex; align-items: center; gap: 16px; margin-right: auto; flex: none; }
.sv-marke img { width: 108px; height: 108px; max-width: none; object-fit: contain; margin: 6px 0 -48px; position: relative; z-index: 2; filter: drop-shadow(0 10px 14px rgba(11, 11, 11, .22)); }
.sv-marke-name { display: block; font-weight: 700; font-size: 1.4em; line-height: 1.05; letter-spacing: -0.015em; color: var(--sv-schwarz); white-space: nowrap; text-transform: none; }
.sv-marke-zusatz { display: block; font-size: .8em; font-weight: 400; color: var(--sv-text-leise); margin-top: 3px; white-space: nowrap; }

.sv-menue { display: flex; align-items: center; gap: 0; }
.sv-menue > li { position: relative; display: flex; align-items: center; }
.sv-menue > li > a { display: block; padding: 10px 8px; font-weight: 700; font-size: .88em; letter-spacing: 0; text-transform: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.sv-menue > li > a:hover, .sv-menue > li > a[aria-current="page"] { border-bottom-color: var(--sv-gelb); }
.sv-menue > li.sv-aktiv > a { border-bottom-color: var(--sv-schwarz); }
.sv-unter-knopf { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; margin-left: -6px; margin-right: 0; border-radius: 4px; color: var(--sv-text-leise); }
.sv-unter-knopf svg { width: 10px; height: 8px; transition: transform .2s; }
.sv-unter-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.sv-kopf .sv-unter { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--sv-weiss); border: 1px solid var(--sv-linie); border-top: 3px solid var(--sv-gelb); border-radius: 0 0 6px 6px; padding: 8px 0; box-shadow: 0 18px 34px -20px rgba(11, 11, 11, .4); z-index: 60; }
.sv-unter a { display: block; padding: 9px 18px; font-size: .9em; font-weight: 600; white-space: nowrap; }
.sv-unter a:hover, .sv-unter a[aria-current="page"] { background: var(--sv-flaeche); }
.sv-unter a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--sv-gelb); }
.sv-kopf .sv-unter-knopf[aria-expanded="true"] + .sv-unter { display: block; }
@media (hover: hover) and (min-width: 1181px) {
  .sv-kopf .sv-hat-unter:hover > .sv-unter { display: block; }
}

.sv-kopf-aktion { display: flex; align-items: center; gap: 8px; flex: none; }
.sv-insta { display: inline-flex; padding: 9px; border-radius: 999px; }
.sv-insta svg { width: 22px; height: 22px; }
.sv-insta:hover { background: var(--sv-flaeche); }
.sv-knopf { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sv-schrift); font-weight: 700; font-size: .9em; line-height: 1.2; text-decoration: none !important; white-space: nowrap; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--sv-schwarz); background: var(--sv-schwarz); color: var(--sv-weiss) !important; transition: background-color .2s, color .2s; }
.sv-knopf:hover { background: var(--sv-weiss); color: var(--sv-schwarz) !important; }
.sv-knopf-hell { background: transparent; color: var(--sv-schwarz) !important; }
.sv-knopf-hell:hover { background: var(--sv-schwarz); color: var(--sv-weiss) !important; }
.sv-menue-knopf { display: none !important; }

@media (max-width: 1380px) {
  .sv-kopf-aktion .sv-knopf { display: none; }
}
@media (max-width: 1180px) {
  .sv-menue-knopf { display: inline-flex !important; border: 1px solid var(--sv-linie) !important; border-radius: 999px; padding: 10px !important; }
  .sv-menue-knopf svg { width: 22px; height: 22px; }
  .sv-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--sv-weiss); border-bottom: 1px solid var(--sv-linie); box-shadow: 0 24px 40px -24px rgba(11, 11, 11, .45); padding: 0 24px; max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); overflow-y: auto; }
  .sv-kopf.sv-offen .sv-nav { display: block; }
  .sv-kopf .sv-menue { flex-direction: column; align-items: stretch; padding: 60px 0 18px; }
  .sv-menue > li { flex-wrap: wrap; border-bottom: 1px solid var(--sv-linie); }
  .sv-menue > li > a { flex: 1; padding: 14px 0; font-size: 1em; border-bottom: 0; }
  .sv-unter-knopf { width: 48px; height: 48px; margin: 0; }
  .sv-unter-knopf svg { width: 12px; height: 9px; }
  .sv-kopf .sv-unter { position: static; flex-basis: 100%; min-width: 0; border: 0; border-left: 3px solid var(--sv-gelb); border-radius: 0; box-shadow: none; padding: 0 0 10px; margin: 0 0 12px 2px; }
  .sv-unter a { padding: 10px 16px; font-size: .95em; }
}
@media (max-width: 520px) {
  .sv-rahmen { padding-left: 16px; padding-right: 16px; }
  .sv-kopf-innen { min-height: 72px; gap: 10px; }
  .sv-marke { gap: 12px; }
  .sv-marke img { width: 70px; height: 70px; margin: 4px 0 -30px; }
  .sv-marke-name { font-size: 1.1em; }
  .sv-marke-zusatz { font-size: .74em; }
  .sv-insta { padding: 7px; }
  .sv-nav { padding: 0 16px; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); }
  .sv-kopf .sv-menue { padding-top: 42px; }
}
@media (max-width: 374px) {
  .sv-marke img { width: 56px; height: 56px; margin: 4px 0 -22px; }
  .sv-marke-zusatz { display: none; }
  .sv-kopf-aktion .sv-insta { display: none; }
}

/* ---------- Fuß ---------- */
.sv-fuss { background: var(--sv-schwarz); color: #d8d8d4; padding: 56px 0 28px; font-family: var(--sv-schrift); font-size: 14.5px; line-height: 1.6; position: relative; z-index: 1; }
.sv-fuss a { display: inline-block; padding: 3px 0; color: #d8d8d4; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: rgba(231, 213, 9, .7); }
.sv-fuss a:hover { color: var(--sv-weiss); text-decoration-color: var(--sv-gelb); }
.sv-fuss :focus-visible { outline: 3px solid var(--sv-gelb); outline-offset: 2px; }
.sv-fuss p { margin: 0; color: #d8d8d4; font-size: inherit; line-height: 1.6; }
.sv-fuss strong { color: var(--sv-weiss); display: block; margin-bottom: 6px; font-weight: 700; }
.sv-fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.sv-fuss-marke { display: flex; gap: 16px; align-items: flex-start; }
.sv-fuss-marke img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.sv-fuss-unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #2a2a28; margin-top: 40px; padding-top: 18px; font-size: 13px; }
@media (max-width: 860px) {
  .sv-fuss-raster { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Unterseiten: alte Titelzeile hell statt dunkel ---------- */
body.sv-alt .cs-titlebar { background: var(--sv-flaeche) !important; background-image: none !important; border-bottom: 1px solid var(--sv-linie); }
body.sv-alt .cs-titlebar .container .cs-table { padding: 72px 0 44px !important; min-height: 0 !important; }
body.sv-alt #wrapper { margin-top: 0 !important; }
body.sv-alt :focus-visible { outline: 3px solid var(--sv-schwarz) !important; outline-offset: 2px; }
body.sv-alt .sv-fuss :focus-visible { outline-color: var(--sv-gelb) !important; }
/* Links im alten Inhalt als Links erkennbar */
body.sv-alt .entry-content :is(p, li) > a:not(:has(img)) { color: inherit !important; text-decoration: underline !important; text-decoration-color: var(--sv-gelb) !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em; }
/* Fließtext lesbar: nicht über die ganze Breite */
body.sv-alt .vce-text-block-wrapper { max-width: 75ch; }
body.sv-alt .vce-text-block-wrapper p { font-size: 16px; line-height: 1.7; }
body.sv-alt .blog-single .post-content { max-width: 75ch; }
body.sv-alt .blog-single .post-content p { font-size: 16px; line-height: 1.7; }
/* Karte bei der Sportstätte: Knopf in Vereinsfarben */
body.sv-alt .svg-karte button { font: 700 14px/1.2 var(--sv-schrift); padding: 10px 18px; border-radius: 999px; border: 2px solid var(--sv-schwarz); background: var(--sv-schwarz); color: var(--sv-weiss); cursor: pointer; margin: 6px 16px 6px 0; }
body.sv-alt .svg-karte button:hover { background: var(--sv-weiss); color: var(--sv-schwarz); }
body.sv-alt .svg-karte a { display: inline-block; margin: 6px 0; }
/* Alter Knopf nach oben: sichtbar in Vereinsfarben */
body.sv-alt .cs-back-to-top { background: var(--sv-schwarz) !important; color: var(--sv-gelb) !important; border-color: var(--sv-schwarz) !important; }
body.sv-alt .cs-back-to-top i { color: var(--sv-gelb) !important; }
/* Das alte Theme hält die Titelzeile fest und schiebt den Inhalt 380px darunter. Jetzt läuft beides normal mit. */
body.sv-alt .cs-titlebar { position: relative !important; top: auto !important; }
body.sv-alt.cs-breadcrumb-active .container.entry-content { margin-top: 0 !important; }
body.sv-alt .cs-titlebar .titlebar-title-h1 { font-size: clamp(26px, 5.5vw, 44px) !important; line-height: 1.15 !important; overflow-wrap: break-word; hyphens: auto; }
body.sv-alt .cs-titlebar::after, body.sv-alt .cs-titlebar:after { display: none !important; }
body.sv-alt .cs-titlebar .titlebar-title-h1 { color: var(--sv-schwarz) !important; font-family: var(--sv-schrift); text-transform: none; letter-spacing: -0.02em; }
body.sv-alt .cs-titlebar .breadcrumb, body.sv-alt .cs-titlebar .breadcrumb a, body.sv-alt .cs-titlebar .breadcrumb span { color: var(--sv-text-leise) !important; }
body.sv-alt .cs-titlebar .breadcrumb a.current-page { color: var(--sv-schwarz) !important; }
@media (max-width: 520px) {
  body.sv-alt .cs-titlebar .container .cs-table { padding: 52px 0 28px !important; }
}

/* ---------- Startseite ---------- */
.sv-start { font-family: var(--sv-schrift); color: var(--sv-text); line-height: 1.65; }
.sv-start img { display: block; max-width: 100%; height: auto; }
.sv-start a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 2px; text-decoration-color: var(--sv-gelb); }
.sv-start :focus-visible { outline: 3px solid var(--sv-schwarz); outline-offset: 3px; border-radius: 2px; }
.sv-start h1, .sv-start h2, .sv-start h3 { font-family: var(--sv-schrift); color: var(--sv-schwarz); text-wrap: balance; }
.sv-start h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.sv-start h2::after { content: ""; display: block; width: 64px; height: 4px; background: var(--sv-gelb); margin-top: 14px; }
.sv-start h3 { font-size: 1.05rem; margin: 0 0 18px; letter-spacing: -0.005em; }
.sv-zahl { font-variant-numeric: tabular-nums; }

.sv-einstieg { padding: 88px 0 80px; }
.sv-einstieg-raster { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.sv-einstieg h1 { font-size: clamp(2.3rem, 4.2vw, 3.7rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 24px; }
.sv-markiert { background: linear-gradient(transparent 58%, var(--sv-gelb) 58%, var(--sv-gelb) 92%, transparent 92%); padding: 0 .06em; }
.sv-einstieg p { font-size: 1.1rem; color: var(--sv-text-leise); max-width: 34em; margin: 0 0 32px; }
.sv-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-einstieg-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 24px 48px -24px rgba(11, 11, 11, .35); }

.sv-spieltag { background: var(--sv-flaeche); padding: 80px 0; }
.sv-abschnitt-kopf { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.sv-abschnitt-kopf p { margin: 0; color: var(--sv-text-leise); max-width: 36em; }
.sv-spieltag-raster { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.sv-spieltag-raster > * { min-width: 0; }

.sv-top { background: var(--sv-weiss); border-radius: 6px; padding: 32px; box-shadow: 0 14px 34px -22px rgba(11, 11, 11, .3); }
.sv-top-meta { display: flex; gap: 18px; align-items: center; font-size: .85rem; color: var(--sv-text-leise); margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--sv-linie); }
.sv-top-meta .sv-liga { line-height: 1.35; }
.sv-top-meta .sv-ausgang { margin-left: auto; }
.sv-ausgang { font-weight: 700; font-size: .78rem; padding: 3px 10px; border-radius: 999px; color: var(--sv-weiss); }
.sv-sieg { background: var(--sv-sieg); }
.sv-niederlage { background: var(--sv-niederlage); }
.sv-remis { background: var(--sv-remis); }
.sv-paarung { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-bottom: 20px; }
.sv-team { font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.sv-team-gast { text-align: right; }
.sv-stand { font-weight: 700; font-size: 3.2rem; line-height: 1; letter-spacing: -0.02em; text-align: center; color: var(--sv-schwarz); }
.sv-halbzeit { display: block; font-size: .8rem; font-weight: 400; color: var(--sv-text-leise); letter-spacing: 0; margin-top: 6px; }
.sv-auszug { color: var(--sv-text-leise); margin: 0 0 20px; max-width: 62ch; }
.sv-weiter { font-weight: 700; text-decoration: underline; }

.sv-ergebnisse { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--sv-linie); }
.sv-ergebnisse li { border-bottom: 1px solid var(--sv-linie); }
.sv-ergebnisse a { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 18px; align-items: center; padding: 14px 4px; text-decoration: none; }
.sv-ergebnisse a:hover .sv-ergebnis-paarung { text-decoration: underline; text-decoration-color: var(--sv-gelb); }
.sv-ergebnis-paarung { font-weight: 700; font-size: .98rem; line-height: 1.35; min-width: 0; }
.sv-ergebnis-stand { font-weight: 700; font-size: 1.2rem; min-width: 2.6em; text-align: right; }

/* Ein Datumsblock für alles: Jahr klein, Datum groß, feste Breite */
.sv-tag { width: 4.6rem; text-align: center; line-height: 1.1; border-right: 1px solid var(--sv-linie); padding-right: 14px; flex: none; }
.sv-tag b { display: block; font-size: .72rem; letter-spacing: .08em; color: var(--sv-text-leise); font-weight: 600; }
.sv-tag span { display: block; font-weight: 700; font-size: 1.15rem; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--sv-schwarz); }

.sv-plaene { list-style: none; margin: 0; padding: 0; background: var(--sv-weiss); border-radius: 6px; box-shadow: 0 14px 34px -22px rgba(11, 11, 11, .3); }
.sv-plaene li { border-bottom: 1px solid var(--sv-linie); }
.sv-plaene li:last-child { border-bottom: 0; }
.sv-plaene a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; text-decoration: none; }
.sv-plaene a:hover strong { text-decoration: underline; text-decoration-color: var(--sv-gelb); text-decoration-thickness: 3px; }
.sv-plaene strong { display: block; font-size: 1.05rem; }
.sv-plaene span { display: block; font-size: .85rem; color: var(--sv-text-leise); }
.sv-plaene svg { width: 18px; height: 18px; flex: none; }
.sv-alle { display: inline-block; margin-top: 20px; font-weight: 700; text-decoration: underline; }
.sv-hinweis { font-size: .85rem; color: var(--sv-text-leise); margin: 14px 0 0; }

.sv-mannschaften { padding: 88px 0; }
.sv-mannschaft-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.sv-mannschaft-raster img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.sv-teamliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sv-linie); }
.sv-teamliste a { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid var(--sv-linie); text-decoration: none; }
.sv-teamliste a:hover strong { text-decoration: underline; text-decoration-color: var(--sv-gelb); text-decoration-thickness: 3px; }
.sv-teamliste strong { font-size: 1.2rem; }
.sv-teamliste span { color: var(--sv-text-leise); font-size: .92rem; text-align: right; }

.sv-sponsoren { padding: 72px 0 88px; border-top: 1px solid var(--sv-linie); }
.sv-logos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; align-items: center; }
.sv-logos a, .sv-logos li > img { display: flex; align-items: center; justify-content: center; height: 72px; }
.sv-logos img { max-height: 64px; width: auto; height: auto; margin: 0 auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s; }
.sv-logos a:hover img { filter: none; opacity: 1; }

@media (max-width: 860px) {
  .sv-einstieg { padding: 64px 0 56px; }
  .sv-einstieg-raster, .sv-spieltag-raster, .sv-mannschaft-raster { grid-template-columns: 1fr; gap: 36px; }
  .sv-logos { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .sv-spieltag-raster > :last-child { order: -1; }
}
@media (max-width: 520px) {
  .sv-einstieg { padding: 56px 0 48px; }
  .sv-spieltag, .sv-mannschaften { padding: 56px 0; }
  .sv-top { padding: 22px 18px; }
  .sv-paarung { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .sv-team-gast { text-align: center; }
  .sv-stand { font-size: 2.6rem; margin: 4px 0; }
  .sv-ergebnisse a { gap: 12px; grid-template-columns: 4.2rem 1fr auto; }
  .sv-tag { width: 4.2rem; padding-right: 10px; }
  .sv-plaene a { padding: 18px 16px; }
  .sv-teamliste a { flex-direction: column; gap: 2px; }
  .sv-teamliste span { text-align: left; }
  .sv-logos { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
}
@media (hover: none) {
  .sv-logos img { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-kopf *, .sv-start *, .sv-fuss * { transition: none !important; }
}

/* ---------- Seite Spielberichte ---------- */
.sv-titel { background: var(--sv-flaeche); border-bottom: 1px solid var(--sv-linie); padding: 80px 0 48px; }
.sv-titel h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 12px; }
.sv-titel p { margin: 0; color: var(--sv-text-leise); max-width: 40em; }
.sv-archiv { padding: 48px 0 80px; }
.sv-archiv-liste { max-width: 860px; }
.sv-start h2.sv-jahr { font-size: 1.4rem; margin: 40px 0 0; }
.sv-start h2.sv-jahr::after { width: 40px; height: 3px; margin-top: 10px; }
.sv-archiv .sv-ergebnisse { margin-top: 18px; }
@media (max-width: 520px) {
  .sv-titel { padding: 56px 0 32px; }
}