/* Revivals – Volleyball aus Schaan
   Farben vom Volleyball (Gelb/Blau) und der Hallen-Anzeigetafel. */

:root {
  --ink: #14244A;
  --blue: #1F4FB5;
  --ball: #FFC72C;
  --ball-soft: #FFF1C7;
  --paper: #F4F6F9;
  --card: #FFFFFF;
  --line: #D3DAE5;
  --muted: #56627A;
  --loss: #8E99AD;
  --danger: #A3282E;

  --f-display: "Century Gothic", "CenturyGothic", "URW Gothic", "URW Gothic L", "Avant Garde", "Futura", "Trebuchet MS", sans-serif;
  --f-ui: "Trebuchet MS", "Lucida Grande", "Segoe UI", Arial, sans-serif;
  --f-body: Arial, Helvetica, sans-serif;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --radius: 3px;
  --wrap: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  font-optical-sizing: auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ball); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ball); color: var(--ink); padding: var(--s2) var(--s4); z-index: 10; }
.skip:focus { left: var(--s4); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s4); }
.wrap.narrow { max-width: 46rem; }
main.wrap { padding-top: var(--s6); padding-bottom: var(--s8); }
.muted { color: var(--muted); }
code { font-size: .9em; background: var(--ball-soft); padding: 0 .25em; border-radius: 2px; }

/* ---------- Kopf ---------- */
.site-head { background: var(--ink); color: #fff; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s3); padding-bottom: var(--s3); }
.wordmark { display: inline-flex; align-items: center; gap: var(--s3); color: #fff; text-decoration: none; }
.wordmark .ball { width: 2.4rem; height: 2.4rem; flex: none; }
.wordmark span { font: 900 2.4rem/1 var(--f-display); letter-spacing: .01em; }
.wordmark:hover { color: var(--ball); }
.main-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.main-nav a { color: #C9D3E8; text-decoration: none; font: 600 1.3rem/1 var(--f-ui); padding: var(--s2) 0; border-bottom: 3px solid transparent; }
.main-nav a:hover { color: #fff; }
.main-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--ball); }
.main-nav .nav-admin { color: var(--ball); }

/* ---------- Typo ---------- */
.page-title { font: 800 clamp(2.4rem, 6vw, 3.6rem)/1 var(--f-display); margin: 0 0 var(--s5); }
.section-title { font: 800 1.9rem/1.05 var(--f-display); margin: 0 0 var(--s3); }
.side-title { font: 700 1.25rem/1.1 var(--f-ui); margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 3px solid var(--ink); }
.intro { font-size: 1.15rem; max-width: 38em; }
.meta { font: 600 1.1rem/1.2 var(--f-ui); color: var(--muted); margin: 0 0 var(--s2); }
.meta .type { color: var(--blue); margin-right: var(--s2); }
.more { font: 700 1.1rem/1 var(--f-ui); margin: var(--s4) 0 0; }
.back { font: 600 1.05rem/1 var(--f-ui); margin: 0 0 var(--s4); }
.back a::before { content: "‹ "; }
.empty { padding: var(--s6); background: var(--card); border: 1px dashed var(--line); text-align: center; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s4); }
.section-head .section-title { margin: 0; }
.section-head p { margin: 0; max-width: 34em; }
section + section { margin-top: var(--s8); }

/* ---------- Startseite ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.card-big .card-title { font: 900 clamp(2.4rem, 5.5vw, 4.4rem)/.95 var(--f-display); margin: 0 0 var(--s4); letter-spacing: -.005em; }
.card-big .card-title a { color: var(--ink); text-decoration: none; }
.card-big .card-title a:hover { text-decoration: underline; text-decoration-color: var(--ball); text-decoration-thickness: 4px; }
.card-big .card-lead { font-size: 1.25rem; line-height: 1.5; max-width: 36em; margin: 0; }
.card-excerpt { font-size: 1.1rem; max-width: 36em; margin: var(--s4) 0 0; color: #2E3A55; }
.card-img { display: block; margin-bottom: var(--s4); background: var(--ink); }
.card-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s6) var(--s5); }
.card { border-top: 3px solid var(--ink); padding-top: var(--s3); }
.card-big { border-top: 0; padding-top: 0; }
.card-title { font: 800 1.55rem/1.05 var(--f-display); margin: 0 0 var(--s2); }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--blue); }
.card-lead { margin: 0; color: #2E3A55; }

/* ---------- Anzeigetafel ---------- */
.scores { display: grid; gap: 2px; }
.score {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta res" "opp res" "sets sets";
  gap: 0 var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4);
  background: var(--card); color: var(--ink); text-decoration: none;
  border-left: 6px solid var(--loss);
}
.score.win { border-left-color: var(--ball); }
.score:hover { background: var(--ball-soft); color: var(--ink); }
.score-meta { grid-area: meta; font: 600 1.02rem/1.2 var(--f-ui); color: var(--muted); }
.score-meta .where { margin-left: var(--s2); }
.score-opp { grid-area: opp; font: 800 1.45rem/1.1 var(--f-display); }
.score-res { grid-area: res; align-self: center; font: 900 2.3rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.score.loss .score-res { color: var(--loss); }
.score-sets { grid-area: sets; display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--s2); }
.score-sets i { font: 700 .98rem/1 var(--f-ui); font-style: normal; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.score-sets i.w { background: var(--ball); border-color: var(--ball); }
.score-sets abbr { text-decoration: none; }
.scores-wide .score { grid-template-columns: 9rem 1fr auto; grid-template-areas: "meta opp res" "meta sets res"; align-items: center; }
.scores-wide .score-sets { margin-top: var(--s1); }

/* ---------- Saisonband ---------- */
.band { background: var(--ink); color: #fff; padding: var(--s5); display: grid; gap: var(--s3); }
.band-row { display: grid; grid-template-columns: 6.5rem 1fr 3.5rem; align-items: center; gap: var(--s4); }
.band-label { color: #fff; font: 700 1.25rem/1 var(--f-ui); text-decoration: none; }
.band-label:hover { color: var(--ball); }
.band-cells { display: flex; flex-wrap: wrap; gap: 5px; }
.cell { width: 1.35rem; height: 1.35rem; border: 2px solid #8396C2; border-radius: 50%; display: block; }
.cell.w { background: var(--ball); border-color: var(--ball); }
.cell:hover { transform: scale(1.25); border-color: #fff; }
.band-sum { font: 800 1.4rem/1 var(--f-display); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Artikel ---------- */
.story { max-width: 46rem; margin: 0 auto; }
.story-title { font: 900 clamp(2.4rem, 7vw, 4.2rem)/.95 var(--f-display); margin: 0 0 var(--s4); }
.story-lead { font-size: 1.3rem; line-height: 1.5; font-weight: 600; margin: 0 0 var(--s6); }
.edit-link { font: 600 1rem/1 var(--f-ui); }
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose p { margin: 0 0 1.1em; }
.prose h3 { font: 800 1.6rem/1.1 var(--f-display); margin: 1.6em 0 .5em; }
.badge { display: inline-block; background: var(--ball); color: var(--ink); font: 700 .85rem/1 var(--f-ui); padding: 3px 6px; border-radius: var(--radius); }

.matchbox { background: var(--card); border-top: 6px solid var(--ink); padding: var(--s5); margin: 0 0 var(--s6); }
.mb-score { display: grid; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.mb-teams { font: 800 1.6rem/1.1 var(--f-display); margin: 0; }
.mb-teams .vs { font: 500 1.1rem var(--f-ui); color: var(--muted); padding: 0 .2em; }
.mb-res { font: 900 3.6rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.mb-score.loss .mb-res { color: var(--loss); }
.mb-score.win .mb-res { text-decoration: underline; text-decoration-color: var(--ball); text-decoration-thickness: 6px; text-underline-offset: 8px; }
.matchbox-page .mb-teams { font-size: clamp(2rem, 5vw, 2.8rem); }
.matchbox-page .mb-res { font-size: clamp(3.6rem, 12vw, 6rem); }
.matchbox .more { margin-top: var(--s4); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s3) var(--s5); margin: 0; }
.facts div { min-width: 0; }
.facts .wide { grid-column: 1 / -1; }
.facts dt { font: 600 .95rem/1.2 var(--f-ui); color: var(--muted); }
.facts dd { margin: 2px 0 0; }
.facts.compact { grid-template-columns: 1fr 1fr; margin: var(--s4) 0 var(--s6); }
.facts.compact dd { font: 800 1.5rem/1 var(--f-display); font-variant-numeric: tabular-nums; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s4); margin: var(--s6) 0; }
.gallery.single { grid-template-columns: 1fr; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--line); }
.gallery.single img { aspect-ratio: auto; }
.gallery figcaption { font-size: .95rem; color: var(--muted); margin-top: var(--s2); line-height: 1.4; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s7); border-top: 3px solid var(--ink); padding-top: var(--s4); }
.pager a { font: 700 1.2rem/1.15 var(--f-display); color: var(--ink); text-decoration: none; }
.pager a span { display: block; font: 600 .95rem/1.4 var(--f-ui); color: var(--blue); }
.pager .next { text-align: right; grid-column: 2; }
.pager a:hover { color: var(--blue); }

/* ---------- Archiv ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-bottom: var(--s4); }
.filters label { display: grid; gap: 4px; font: 600 .95rem/1 var(--f-ui); color: var(--muted); }
.filters .f-q { flex: 1 1 16rem; }
input, select, textarea, button { font: inherit; color: var(--ink); }
input:not([type=checkbox]):not([type=file]), select, textarea {
  width: 100%; padding: .55rem .7rem; background: var(--card); border: 1px solid #AEB9CB; border-radius: var(--radius); font-family: var(--f-body); font-size: 1rem;
}
button, .btn {
  display: inline-block; font: 700 1.1rem/1 var(--f-ui); padding: .7rem 1.1rem; border-radius: var(--radius);
  background: var(--ink); color: #fff; border: 2px solid var(--ink); cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.link-btn { background: none; border: 0; padding: 0; color: var(--danger); text-decoration: underline; font: inherit; }
.link-btn:hover { background: none; color: var(--ink); }
.result-count { margin: 0 0 var(--s5); }

.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.archive-list time { font: 700 1.05rem/1.3 var(--f-ui); color: var(--muted); padding-top: 2px; }
.archive-list .meta { margin-bottom: 2px; }
.al-title { font: 800 1.5rem/1.1 var(--f-display); margin: 0 0 var(--s2); }
.al-title a { color: var(--ink); text-decoration: none; }
.al-title a:hover { color: var(--blue); text-decoration: underline; }
.archive-list p { margin: 0; max-width: 42em; }
.paging { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.paging a { font: 700 1.1rem/1 var(--f-ui); min-width: 2.4rem; padding: .6rem; text-align: center; background: var(--card); text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.paging a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Spiele ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.tabs a { font: 700 1.15rem/1 var(--f-ui); padding: .55rem .9rem; color: var(--ink); text-decoration: none; border: 2px solid var(--ink); border-radius: 99px; }
.tabs a:hover { background: var(--ball-soft); }
.tabs a[aria-current="page"] { background: var(--ink); color: #fff; }
.season-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.bilanz-big { font: 900 5rem/.9 var(--f-display); margin: 0; font-variant-numeric: tabular-nums; }
.league { width: 100%; border-collapse: collapse; font: 600 1.05rem/1.2 var(--f-ui); }
.league th { text-align: left; color: var(--muted); font-weight: 600; padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 1px solid var(--line); }
.league td { padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.league th:nth-child(n+3), .league td:nth-child(n+3) { text-align: right; }
.league tr.us td { background: var(--ball); font-weight: 700; }
.league tr.us td:first-child { padding-left: var(--s2); }
.related { margin-top: var(--s7); }

/* ---------- Team ---------- */
.players { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s5); }
.players a { display: block; color: var(--ink); text-decoration: none; }
.ph { display: block; aspect-ratio: 4 / 5; background: var(--ink); overflow: hidden; margin-bottom: var(--s3); border-bottom: 6px solid var(--ball); }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) contrast(1.05); }
.players a:hover .ph img { filter: none; }
.initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 900 5rem/1 var(--f-display); color: var(--ball); background: var(--ink); }
.initial.big { aspect-ratio: 4 / 5; font-size: 9rem; }
.p-name { display: block; font: 800 1.6rem/1 var(--f-display); }
.p-name span { font-weight: 600; }
.p-meta { display: block; font: 500 1rem/1.4 var(--f-ui); color: var(--muted); }
.players a:hover .p-name { color: var(--blue); }
.profile { display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: var(--s7); align-items: start; margin-bottom: var(--s7); }
.profile-photo img { width: 100%; border-bottom: 8px solid var(--ball); }

/* ---------- Gästebuch ---------- */
.guestbook { list-style: none; padding: 0; margin: var(--s6) 0 0; }
.guestbook li { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.gb-head { margin: 0 0 var(--s2); font-family: var(--f-ui); font-size: 1.15rem; }
.gb-head time { color: var(--muted); margin-left: var(--s2); font-size: 1rem; }
.gb-body { overflow-wrap: anywhere; }

/* ---------- Redaktion ---------- */
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); }
.admin-head .page-title { margin: 0; }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.admin-actions form { margin: 0; }
.notice, .alert { padding: var(--s3) var(--s4); border-left: 6px solid var(--ball); background: var(--card); margin: var(--s4) 0; }
.alert { border-left-color: var(--danger); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--card); }
.admin-table th, .admin-table td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { font: 600 1rem/1.2 var(--f-ui); color: var(--muted); }
.admin-table td:first-child { white-space: nowrap; font-family: var(--f-ui); font-weight: 600; }
.admin-table form { margin: 0; }

.form { display: grid; gap: var(--s4); }
.form label { display: grid; gap: 4px; min-width: 0; }
.form input, .form select { min-width: 0; max-width: 100%; }
.editor-side > *, .row2 > * { min-width: 0; }
.form label > span, .form legend { font: 700 1.05rem/1.2 var(--f-ui); }
.form small { display: block; font: 400 .9rem/1.3 var(--f-body); color: var(--muted); }
.form label.check { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; font-family: var(--f-ui); font-weight: 600; font-size: 1.05rem; }
.form label.check small { flex-basis: 100%; }
.form fieldset { border: 1px solid var(--line); padding: var(--s4); margin: 0; background: var(--card); display: grid; gap: var(--s3); }
.form textarea { line-height: 1.5; }
.editor { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; gap: var(--s6); }
.editor-main, .editor-side { display: grid; gap: var(--s4); }
.editor-side { position: sticky; top: var(--s4); background: var(--card); padding: var(--s4); border-top: 6px solid var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.help { background: var(--ball-soft); padding: var(--s3) var(--s4); }
.help summary { font: 700 1.05rem/1.2 var(--f-ui); cursor: pointer; }
.help ul { margin: var(--s2) 0 0; padding-left: 1.2em; }
.img-row { display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--s3); align-items: center; }
.img-row img { width: 6rem; height: 4.5rem; object-fit: cover; }
.sets-input { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.sets-input span { font-size: .9rem !important; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s2); }
.danger { border-top: 1px solid var(--line); padding-top: var(--s4); display: grid; gap: var(--s2); }
.login { max-width: 24rem; }

/* ---------- Fuss ---------- */
.site-foot { background: var(--ink); color: #C9D3E8; padding: var(--s6) 0; font-size: .95rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); }
.foot-row p { margin: 0; }
.site-foot strong { color: #fff; }
.site-foot a { color: #C9D3E8; }

/* ---------- Mobil ---------- */
@media (max-width: 60rem) {
  .hero, .season-grid, .editor { grid-template-columns: 1fr; gap: var(--s6); }
  .editor-side { position: static; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  main.wrap { padding-top: var(--s5); }
  .wordmark span { font-size: 2rem; }
  .wordmark .ball { width: 2rem; height: 2rem; }
  .main-nav { gap: var(--s1) var(--s4); }
  .band { padding: var(--s4); }
  .band-row { grid-template-columns: 1fr auto; gap: var(--s2); }
  .band-cells { grid-column: 1 / -1; grid-row: 2; }
  .cell { width: 1.15rem; height: 1.15rem; }
  .archive-list li { grid-template-columns: 1fr; gap: var(--s1); }
  .scores-wide .score { grid-template-columns: 1fr auto; grid-template-areas: "meta res" "opp res" "sets sets"; }
  .profile { grid-template-columns: 1fr; gap: var(--s5); }
  .profile-photo { max-width: 14rem; }
  .sets-input { grid-template-columns: repeat(3, 1fr); }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .cell:hover { transform: none; } }

/* Anim-Gifs der alten Seite: nicht beschneiden, Originalgrösse */
.gif-wall { margin: var(--s7) 0 var(--s6); }
.gallery.gifs { align-items: end; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--s5); }
.gallery.gifs figure { background: #fff; border: 1px solid var(--line); padding: var(--s3); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.gallery.gifs img { width: 100%; max-width: 34rem; aspect-ratio: auto; object-fit: contain; background: none; image-rendering: auto; }
.gallery.gifs figcaption { text-align: center; }

/* Flash-Animationen (Ruffle) */
.flash-wall { margin: var(--s7) 0 var(--s6); }
.swf-group { font: 800 1.4rem/1.1 var(--f-display); margin: var(--s6) 0 var(--s3); }
.swf-grid { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-end; }
.swf { margin: 0; flex: 0 1 auto; max-width: 100%; }
.swf.wide { flex-basis: auto; }
.swf-box { position: relative; width: 100%; min-width: min(240px, 100%); background: #000; border: 1px solid var(--line); overflow: hidden; }
.swf-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 600 .95rem/1 var(--f-ui); letter-spacing: .04em; opacity: .7; }
.swf figcaption { font-size: .95rem; color: var(--muted); margin-top: var(--s2); }
.swf figcaption small { font: 500 .8rem/1 var(--f-ui); margin-left: var(--s2); }

/* Hinweis Liga/Wettbewerb pro Saison */
.season-note { font: 600 1.1rem/1.3 var(--f-ui); letter-spacing: .02em; color: var(--ink); background: var(--ball-soft); border-left: 4px solid var(--ball); padding: var(--s2) var(--s3); margin: 0 0 var(--s4); }
.score-meta .comp { margin-left: var(--s2); color: var(--blue); }
.table-note { font-size: .9rem; margin-top: var(--s2); }

/* Cup-Lauf unter der Saisontabelle */
.cup-run { margin-top: var(--s6); }
.cup-list { list-style: none; margin: var(--s3) 0 0; padding: 0; border-left: 3px solid var(--line); }
.cup-item { position: relative; padding: 0 0 var(--s4) var(--s4); }
.cup-item::before { content: ""; position: absolute; left: -9px; top: .25rem; width: 15px; height: 15px; border-radius: 50%; background: var(--ball); border: 2px solid var(--ink); }
.cup-item.loss::before { background: var(--card); border-color: var(--loss); }
.cup-item p { margin: 0; }
.cup-round { font: 700 .95rem/1.2 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.cup-round span { color: var(--muted); font-weight: 500; margin-left: var(--s2); text-transform: none; letter-spacing: 0; }
.cup-match { font: 700 1.15rem/1.25 var(--f-ui); margin-top: 2px !important; }
.cup-match a { color: var(--ink); text-decoration: none; }
.cup-match a:hover { color: var(--blue); text-decoration: underline; }
.cup-match small { font-weight: 500; color: var(--muted); }
.cup-match b { font: 800 1.3rem/1 var(--f-display); margin-left: var(--s2); }
.cup-item.loss .cup-match b { color: var(--loss); }
.cup-sets { font: 500 .9rem/1.3 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.cup-sum { font-size: .98rem; line-height: 1.5; margin-top: var(--s2) !important; }

/* Vollständige Berichte auf den Spielseiten */
.related-full { margin-top: var(--s7); }
.story-embed { border-top: 4px solid var(--ink); padding-top: var(--s5); margin-top: var(--s6); }
.story-embed:first-child { margin-top: 0; }
.story-embed .story-title { font: 900 clamp(1.9rem, 4.5vw, 2.8rem)/1 var(--f-display); margin: 0 0 var(--s3); }
.story-link { margin: var(--s4) 0 0; font: 600 1rem/1.2 var(--f-ui); letter-spacing: .02em; }

/* Zeitungsausschnitte */
.press { margin: var(--s7) 0 var(--s6); }
.press-clip { margin: var(--s4) 0 0; background: #fff; border: 1px solid var(--line); padding: var(--s3); }
.press-clip img { width: 100%; height: auto; }

/* Grossansicht */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(10,18,40,.92); }
.lb-scroll { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; padding: var(--s7) var(--s4) var(--s4); }
.lb-scroll img { max-width: min(100%, 1400px); height: auto; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-close { position: fixed; top: var(--s3); right: var(--s3); z-index: 51; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--ball); color: var(--ink); font: 700 1.8rem/1 var(--f-ui); cursor: pointer; }
.more.more-end { text-align: right; margin-top: var(--s5); }
.archive-list li[id] { scroll-margin-top: var(--s5); }
.archive-list li.ziel { background: var(--ball-soft); box-shadow: -8px 0 0 var(--ball-soft), 8px 0 0 var(--ball-soft); }

/* Siegquote auf den Spielerprofilen */
.winrate { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s5); padding: var(--s3) var(--s4); background: var(--card); border-left: 6px solid var(--ball); max-width: 30rem; }
.wr-num { font: 900 3.4rem/1 var(--f-display); margin: 0; color: var(--ink); }
.wr-num small { font-size: 1.6rem; margin-left: 2px; }
.wr-side { flex: 1; }
.wr-label { font: 700 1rem/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2); }
.wr-bar { height: 12px; background: var(--line); border-radius: 6px; overflow: hidden; }
.wr-bar span { display: block; height: 100%; background: var(--ball); border-right: 2px solid var(--ink); }
.wr-detail { font: 600 1rem/1.2 var(--f-ui); margin: var(--s2) 0 0; }
.score.score-free { opacity: .75; border-style: dashed; }
.score.score-free .score-meta .comp { margin-left: 0; }
.wordmark img.ball { border-radius: 50%; object-fit: cover; }

/* Galina-Ball wie aufgeklebt: füllt den Kopfbalken links vom Balkenanfang, ohne Überstand */
.site-head { position: relative; overflow: hidden; }
.site-head .head-row { min-height: 5.2rem; padding-left: max(var(--s4), calc(8.8rem - max(0px, (100vw - var(--wrap)) / 2))); }
.wordmark img.ball { position: absolute; left: 0; top: 0; bottom: 0; height: 100%; width: auto; aspect-ratio: 456 / 324; object-fit: cover; border-radius: 0; }
@media (max-width: 40rem) {
  .site-head .head-row { min-height: 4.2rem; padding-left: 6.8rem; }
}

/* Galerie */
.gal-season { margin: var(--s7) 0 0; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s5); align-items: start; }
.gal-item { margin: 0; background: var(--card); border: 1px solid var(--line); }
.gal-item img { display: block; width: 100%; height: auto; }
.gal-item figcaption { padding: var(--s3); font-size: .98rem; line-height: 1.45; display: grid; gap: var(--s1); }
.gal-item time { font: 700 .9rem/1.2 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.gal-link { font: 600 .95rem/1.3 var(--f-ui); margin-top: var(--s1); }

/* Grossansicht: Bildunterschrift und Blättern */
.lb-fig { margin: 0; display: grid; justify-items: center; gap: var(--s3); max-width: min(100%, 1400px); }
.lb-fig img { max-height: calc(100vh - 11rem); width: auto; max-width: 100%; }
.lb-cap { max-width: 60rem; color: #fff; font: 400 1.05rem/1.5 var(--f-body); text-align: center; display: grid; gap: var(--s1); }
.lb-count { font: 700 .9rem/1 var(--f-ui); letter-spacing: .08em; color: var(--ball); }
.lb-count:empty { display: none; }
.lb-nav { position: fixed; top: 50%; z-index: 51; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink); font: 700 2.4rem/1 var(--f-ui); cursor: pointer; display: grid; place-items: center; padding-bottom: .25rem; }
.lb-nav:hover { background: var(--ball); }
.lb-nav[hidden] { display: none; }
.lb-prev { left: var(--s3); } .lb-next { right: var(--s3); }
@media (max-width: 40rem) { .lb-nav { width: 2.6rem; height: 2.6rem; font-size: 2rem; top: auto; bottom: var(--s3); margin-top: 0; } }

/* Schriften der alten revival.li: Century Gothic (Titel), Trebuchet MS (Menü/Beschriftungen), Arial (Text).
   Century Gothic läuft deutlich breiter als die bisherige schmale Titelschrift: Grössen angepasst. */
body { font-size: 1rem; line-height: 1.6; }
.wordmark span { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; }
.page-title { font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.story-title { font-size: clamp(1.9rem, 4.8vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.card-big .card-title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.section-title { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; }
.card-title, .al-title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.prose { font-size: 1.05rem; line-height: 1.65; }
.prose h3, .swf-group { font-size: 1.3rem; font-weight: 700; }
.story-embed .story-title { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.mb-teams { font-size: 1.6rem; font-weight: 700; }
.mb-res, .bilanz-big, .wr-num { font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; }
.score-res, .band-sum, .cup-match b { font-weight: 700; }
.score-opp { font-weight: 700; }
.main-nav a { font-size: 1.05rem; font-weight: 700; }
.meta, .side-title, .vg-tabs button, .vg-switch button { font-weight: 700; }
@media (max-width: 40rem) { .wordmark span { font-size: 1.6rem; } }
.gallery img.hoch { object-position: 50% 14%; }
.followup { margin: var(--s6) 0; padding: var(--s4); background: var(--ball-soft); border-left: 6px solid var(--ball); max-width: 40rem; }
.followup-label { font: 700 .95rem/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); }
.followup .score { background: var(--card); }

/* Saisons 1994–1999: Tabellen aus Zeitungsausschnitten */
.league-full { font-size: .95rem; }
.league-full td small { font-weight: 600; font-size: .8em; }
.table-clip, .season-clip { max-width: 26rem; }
.table-clip figcaption, .season-clip figcaption { font-size: .85rem; margin-top: var(--s2); }
.season-grid .press { margin-top: var(--s5); }
.band-text { font: 600 .9rem/1.2 var(--f-ui); color: rgba(255,255,255,.7); align-self: center; }
.band-text a { color: inherit; text-decoration: none; }
.band-text a:hover { color: var(--ball); }

/* 1998/99: letzte drei Spiele mit Matchblättern */
.finale-99 { margin: var(--s5) 0 var(--s6); }
.finale-99 .scores { margin: var(--s4) 0; }
.set-note { font: 600 .8rem/1 var(--f-ui); color: var(--muted); margin-left: var(--s2); }
.score.score-open .score-res { color: var(--muted); }
.gallery.sheets { margin: var(--s4) 0 0; gap: var(--s5); }
.gallery.sheets figcaption { font-size: .9rem; color: var(--muted); margin-top: var(--s2); }
.cell.open { border-style: dashed; opacity: .8; }
.band-text-inline { font: 600 .9rem/1.2 var(--f-ui); color: rgba(255,255,255,.7); text-decoration: none; margin-left: var(--s3); align-self: center; }
.band-text-inline:hover { color: var(--ball); }

.season-story { margin-top: var(--s6); }
.score.score-nolink .score-meta .comp { margin-left: 0; }
.score-opp .set-note { display: inline; }
.facts dd small { font: 500 .8rem/1.2 var(--f-ui); color: var(--muted); display: block; }
.score-opp .opp-note { display: block; font: 600 .8rem/1.3 var(--f-ui); color: var(--muted); margin-top: 2px; }

.list-title { font: 700 1.1rem/1.2 var(--f-ui); letter-spacing: .02em; margin: var(--s5) 0 var(--s3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); }
.list-title span { font-weight: 600; font-size: .9rem; color: var(--muted); }

/* Resultatkarten: Heim/Auswärts und Runde immer unter dem Datum */
.score-meta .where, .score-meta .comp { display: block; margin-left: 0; }
.score-meta .where { font-weight: 500; margin-top: 2px; }
@media (max-width: 52rem) { .wordmark img.ball { bottom: auto; height: 4.2rem; } .site-head .head-row { padding-left: 6.8rem; } }
.sub-title { font: 700 1rem/1.3 var(--f-ui); margin: var(--s4) 0 var(--s2); }

/* Spielerprofil: Meisterschaft 1994–1999 */
.ms-early { margin: 0 0 var(--s6); }
.ms-list { list-style: none; margin: var(--s3) 0 0; padding: 0; max-width: 26rem; }
.ms-list li { display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font: 600 1rem/1.3 var(--f-ui); }
.ms-list li span { color: var(--muted); }
.ms-list li b { font-variant-numeric: tabular-nums; }
.ms-list li.sum { grid-template-columns: 1fr auto; border-bottom: 0; border-top: 2px solid var(--ink); }
.ms-list li.sum span { color: var(--ink); }

/* Statistik-Artikel */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.kpi { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--ink); padding: var(--s3); display: grid; gap: var(--s1); }
.kpi b { font: 700 2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.kpi b small { font-size: .55em; margin-left: 2px; }
.kpi span { font: 600 .85rem/1.2 var(--f-ui); color: var(--muted); }
.kpi.hl { border-top-color: var(--ball); background: var(--ball-soft); }
.kpis-hero { margin: var(--s4) 0 0; }
.table-scroll { overflow-x: auto; }
.stats-table { margin: var(--s3) 0; min-width: 30rem; }
.stats-table tr.sum td { font-weight: 700; border-top: 2px solid var(--ink); }
.prose.stats h3 { margin-top: var(--s6); }
.players-table td small { font-weight: 500; color: var(--muted); }
.players-table td:first-child { white-space: nowrap; }
.season-table th:nth-child(3), .season-table td:nth-child(3) { text-align: left; }
.signoff { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); font-style: italic; }
.signoff strong { font-style: normal; }
.signoff-hero { margin-top: var(--s4); padding-top: var(--s3); }
.signoff a { color: var(--blue); font-weight: 700; font-style: normal; text-decoration: none; }
.signoff a:hover { color: var(--ink); }
.signoff { font-style: normal; }
.signoff-hero { font-size: 1.25rem; line-height: 1.5; color: #2E3A55; max-width: 36em; }

/* Startseite: Spieler kompakt */
.hero-players { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0 var(--s4); font: 600 .95rem/1.3 var(--f-ui); }
.hero-players li { display: flex; justify-content: space-between; gap: var(--s2); padding: 5px 0; border-bottom: 1px solid var(--line); }
.hero-players a { color: var(--ink); text-decoration: none; }
.hero-players a:hover { color: var(--blue); }
.hero-players span { color: var(--muted); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-players { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.hero-players-head { display: flex; justify-content: space-between; margin: var(--s4) 0 0; font: 700 .8rem/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); max-width: 12rem; }
.hero-players-head + .hero-players { margin-top: var(--s2); }
.hero-players-head { display: block; max-width: none; }
.signoff a { color: var(--ink); }
.signoff a:hover { color: var(--blue); }
.prose a { overflow-wrap: anywhere; }