/* Static maintenance site (static/maintenance): the few additions to site.css of the CMS (design F, copied unchanged).
   Scripts, all from this server: site.js of the CMS on every page (slider, menu drawer, tabs, team filter, countdown),
   hallplan.js of the CMS on training.html, games.js (switch to the next match) on index.html and 1-damen.html. Nothing writes
   cookies or browser storage – the theme switch, the copy and share buttons and the form handlers of site.js find no markup here. */

/* Hero of the start page: the slider of the CMS (site.js), every photo complete and never covered (E10), text beside it from 900 px
   (rules of design B in site.css). The track keeps overflow-x: auto from site.css: it scrolls with scroll snap, stays swipeable and
   still clips the rounded card. The buttons stand below the text. */
.hero-slide__lead { margin: 0 0 var(--s3); max-width: 46ch; color: var(--text); }
.hero-slide__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s4); }
.hero-slide__credit { margin: var(--s3) 0 0; font-size: .8rem; color: var(--muted); }
/* The chip of a hero slide may wrap – on one line it made slide 1 wider than the track below 346 px and cut off the photo (E10);
   a slide never grows beyond the track */
.hero-slide .chip { white-space: normal; }
.hero .slides__item { min-width: 0; }
/* A slide that is a link fills the track, which clips the focus ring drawn outside the link – the ring goes around the track instead */
.hero .slides__track:has(> a.slides__item:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Top bar: the name of the club with the department below (wish of the user, 31.10.2026; the footer has no logo any more) – always
   on one line; a little smaller where the menu button (below 360 px) or the main navigation (768–899 px) leaves less room */
.topbar .brand__name { white-space: nowrap; }
@media (max-width: 359px), (min-width: 768px) and (max-width: 899px) { :root[data-design~="b"] .topbar .brand__name { font-size: 1.15rem; } }

/* The maintenance notice as a band at the top of main – the first thing a visitor sees and hears after the skip link */
.maintenance-bar { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid rgba(154, 74, 6, .15); }
.maintenance-bar__inner { display: flex; gap: 12px; align-items: flex-start; padding-block: var(--s3); font-size: .95rem; line-height: 1.5; }
.maintenance-bar .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.maintenance-bar strong { color: inherit; }
.maintenance-bar a { color: inherit; font-weight: 700; }
@media (min-width: 768px) { .maintenance-bar__inner { align-items: center; font-size: 1rem; } }
/* Phones: the notice in two or three lines, so that the buttons of the hero stay above the bottom bar */
@media (max-width: 599px) {
  .maintenance-bar__more { display: none; }
  .maintenance-bar__inner { padding-block: var(--s2); font-size: .9rem; }
}

/* "Kommt in die Halle" below the hero: the next home match of the 1. Damen as a card as wide as the content (not half over the hero as
   in the slider design), below it the next home match days – both written by tools/maintenance-games.php */
.next-match .page-lead { margin-bottom: var(--s4); }
.next-match__more { margin: var(--s5) 0 var(--s2); }
/* Phones: three home match days keep the start page short; from 768 px four in two columns */
@media (max-width: 767px) { .next-match .homeday:nth-child(n+4) { display: none; } }
@media (min-width: 900px) {
  .next-match .match { padding: var(--s5) var(--s6); }
  .next-match .match__teams { width: 100%; max-width: 720px; margin-inline: auto; }
  .next-match .match__time { font-size: 2.6rem; }
  .next-match .team-badge { font-size: .95rem; }
  .next-match .team-badge__logo { width: 64px; height: 64px; }
  .next-match .match__actions { justify-content: center; }
  .next-match .match__actions .btn { flex: 0 1 auto; min-width: 220px; }
}
/* The chip of a match card (team and league from SAMS) may wrap – at 320 px it widened the whole page */
.match__top { flex-wrap: wrap; }
.match__top .chip { white-space: normal; }
/* The countdown of the match card counts in site.js – without a script it would only show dashes */
@media (scripting: none) { .countdown { display: none; } }

/* Team page of the 1. Damen (prototype team.html): two columns from tablet width */
@media (min-width: 900px) { .two-col--team { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.team-page .section__title { margin-top: var(--s2); }
.team-page .crumbs { padding-top: var(--s3); }
.card .btn { justify-self: start; }
/* Team hero between 768 and 1023 px: photo above the name as on phones – side by side the stats have no room */
@media (min-width: 768px) and (max-width: 1023px) {
  .team-hero--photo { display: block; }
  .team-hero--photo .team-hero__body { padding: var(--s4) var(--gutter) var(--s5); }
}
/* The label of a stat on its own lines below the value, not double-spaced as an inline span */
.stat__label { display: block; margin-top: 4px; line-height: 1.3; }
/* Narrow phones: 'willkommen' fits the label of a stat, and all four tabs of the team page fit the width ('Kader' was off-screen) */
@media (max-width: 359px) { .stat { padding-inline: 8px; } }
@media (max-width: 399px) {
  :root[data-design~="b"] .tabs__list { gap: 2px; }
  :root[data-design~="b"] .tabs__tab { padding-inline: 8px; font-size: .875rem; }
}

/* News card without a photo: an icon in the square */
.news-card__img--icon { display: grid; place-items: center; color: var(--link); }
.news-card__img--icon .icon { width: 36px; height: 36px; }
/* Feature card with a portrait photo: the photo column as wide as the photo – complete, no grey bands (E10) */
@media (min-width: 768px) {
  .news-card--portrait { grid-template-columns: auto minmax(0, 1fr); }
  .news-card--portrait .news-card__img { min-height: 0; }
  .news-card--portrait .news-card__img img { width: auto; max-width: 100%; height: min(70svh, 520px); max-height: none; }
}
/* Landscape feature cards between 768 and 1023 px: photo above the text, so that the photo fills its box */
@media (min-width: 768px) and (max-width: 1023px) {
  .news-card--feature:not(.news-card--portrait) { grid-template-columns: minmax(0, 1fr); }
  .news-card--feature:not(.news-card--portrait) .news-card__img { min-height: 0; }
  .news-card--feature:not(.news-card--portrait) .news-card__body { padding: var(--s4) var(--s5) var(--s5); }
}

/* Entry cards as steps without a link (mitmachen.html): in reading order, stacked until three fit side by side; no hover effect,
   the shadow of design D stays as it is */
.entry-cards--steps { list-style: none; margin: var(--s4) 0 0; padding: 0; }
@media (min-width: 600px) and (max-width: 1023px) { .entry-cards--steps { grid-template-columns: minmax(0, 1fr); } }
:root[data-design~="d"] li.entry-card:hover { box-shadow: var(--card-shadow); }
/* Start page: "Finde deine Gruppe" inside the join box – one block instead of two. The cards stand above the stripes of the box;
   the lead may use the full width, because the cards hide the stripes below it anyway. */
.join--groups p { max-width: 60ch; }
.join--groups .entry-cards { position: relative; z-index: 1; margin-bottom: var(--s4); }
/* Each card on its own layer as well – in Chromium the green circle of the box otherwise painted over the last card – and the
   circle beside the lead instead of between the cards */
.join--groups .entry-card, .join--groups .join__title, .join--groups p { position: relative; z-index: 1; }
:root[data-design~="b"] .join--groups::after { top: 140px; }
/* Phones: two compact columns – icon, title and the short status; the longer text from 600 px, where the cards have room */
@media (max-width: 599px) {
  .join--groups .entry-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .join--groups .entry-card { grid-template-columns: minmax(0, 1fr); padding: var(--s3); row-gap: 4px; }
  .join--groups .entry-card__icon { grid-row: auto; width: 36px; height: 36px; margin-bottom: 4px; }
  .join--groups .entry-card__icon .icon { width: 20px; height: 20px; }
  .join--groups .entry-card__title { font-size: 1rem; hyphens: auto; }
  .join--groups .entry-card__text { display: none; }
  .join--groups .entry-card__meta { font-size: .8rem; }
}

/* Folded lists (written by tools/maintenance-games.php): the further home days on spiele.html and the standings of a league in its
   team section. The summary is a tap area of 44 px with a chevron drawn from two borders – down while folded, up when open. */
.homedays-more, .team-games__table { margin-top: var(--s3); }
.homedays-more > summary, .team-games__table > summary {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap);
  font-weight: 800; color: var(--link); cursor: pointer; list-style: none;
}
.homedays-more > summary::-webkit-details-marker, .team-games__table > summary::-webkit-details-marker { display: none; }
.homedays-more > summary::after, .team-games__table > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .2s;
}
.homedays-more[open] > summary, .team-games__table[open] > summary { margin-bottom: var(--s2); }
.homedays-more[open] > summary::after, .team-games__table[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
/* The standings compact, so that rank, team, games, sets and points fit a phone */
.team-games__table .standings { font-size: .85rem; }
.team-games__table .standings th, .team-games__table .standings td { padding: 6px var(--s2); }

/* Head of spiele.html: the two cards on the home games and on tables, side by side from tablet width */
.games-cards { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 768px) { .games-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* Instagram and Twitch (start page, 1. Damen): the latest post of every account as a square tile, copied by hand onto this server
   (see README) – the page loads nothing from Instagram or Twitch */
.insta--accounts .insta-post { aspect-ratio: 1; }
@media (min-width: 900px) { .insta--accounts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
/* Start page: eight posts and the Twitch tile without a hole in the last row – 3 x 3 up to 1099 px, from 1100 px two rows of five
   with the Twitch tile two columns wide */
@media (min-width: 900px) and (max-width: 1099px) {
  .insta--accounts:has(> .insta-post--twitch) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .insta--accounts:has(> .insta-post--twitch) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .insta--accounts .insta-post--twitch { grid-column: span 2; aspect-ratio: auto; }
}
/* Tiles with an icon instead of a photo: Twitch, and the champions of the 1. Damen (no cropped team photo, E10) */
.insta-post--twitch, .insta-post--icon { display: grid; place-items: center; }
.insta-post--twitch .icon, .insta-post--icon .icon { width: 64px; height: 64px; color: rgba(255, 255, 255, .9); }
/* Account and date stand on the photo, each on a dark pill, so that they stay readable on bright photos (white on
   rgba(0, 0, 0, .6) reaches at least 5.7:1 on any photo). The account stays on one line – a long handle ends in an ellipsis instead
   of running into the date; the date at the minimum size of 12 px. */
.insta--accounts .insta-post__account,
.insta--accounts .insta-post__date {
  right: auto; max-width: calc(100% - 2 * var(--s3)); padding: 1px 8px; border-radius: 999px; line-height: 1.5;
  background: rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.insta-post__date { position: absolute; left: var(--s3); top: 40px; z-index: 1; font-size: .75rem; font-weight: 700; color: #fff; }

/* Team cards as in the prototype: badge, name, league, training days as chips – the hall as a tinted chip */
.team-group__lead { max-width: 68ch; margin-bottom: var(--s3); color: var(--muted); }
.team-group__lead a { font-weight: 700; }
.day-chip--hall { background: var(--tint-bg); color: var(--tint-text); }
/* Short description of a team (texts of the former team pages, prototype teams-data.js) */
.team-card__text { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.45; color: var(--text); }
.team-card--featured .team-card__text { color: rgba(255, 255, 255, .9); }

/* All games by team (spiele.html, written by tools/maintenance-games.php): upcoming games and results side by side from 1024 px */
.team-games { margin-top: var(--s5); }
/* Arriving through #damen, #spiele-h2 …: site.js hides the other groups, and the fragment scroll would put the group right under
   the top bar – with the filter bar above it hidden behind the top bar. Stop the scroll earlier. */
[data-team-group] { scroll-margin-top: 5.5rem; }
.team-games .section__head { margin-bottom: var(--s2); }
.team-games__league { font-family: var(--font); font-size: .85rem; font-weight: 700; color: var(--muted); }
.team-games__cols { display: grid; gap: var(--s3) var(--s5); }
@media (min-width: 1024px) { .team-games__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team-games .fixtures-head { margin-top: var(--s2); }
/* Fixture rows on phones: narrower date, logo and result columns give opponent and hall about 40 px more (the result selector
   must beat the min-width of 58 px of design D) */
@media (max-width: 479px) {
  .fixture { grid-template-columns: 40px 28px minmax(0, 1fr) auto; gap: var(--s2); }
  .fixture__logo { width: 28px; height: 28px; }
  .fixtures .fixture .result { min-width: 44px; }
}

/* Hall plan as a table per hall (the fallback without script): weekday, then the training slots of the day. Laid out as a grid per row so that the slots
   wrap instead of widening the table (a table cell never wraps below its longest line). */
.plan, .plan caption, .plan tbody { display: block; }
.plan { width: 100%; max-width: 68ch; margin-top: var(--s4); font-size: .95rem; }
.plan caption { text-align: left; padding-bottom: var(--s2); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; color: var(--text-strong); }
.plan tr { display: grid; grid-template-columns: 7rem minmax(0, 1fr); border-top: 1px solid var(--border); }
.plan th, .plan td { display: block; padding: var(--s2); text-align: left; }
.plan th { font-weight: 800; color: var(--text-strong); }
.plan td { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.plan td span { white-space: nowrap; }
.plan time { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.plan__free { color: var(--muted); }
@media (max-width: 480px) {
  .plan tr { grid-template-columns: 1fr; }
  .plan th { padding-bottom: 0; }
  .plan td { padding-top: 4px; }
}
/* Hall plan grid from 900 to 1099 px: a field column is only about 47 px wide – less inner padding, so that 'Damen V' and
   'Jugend Mixed' are not clipped */
@media (min-width: 900px) and (max-width: 1099px) { .plan-grid__block { padding-inline: 2px; } }

/* Tiles without a link (facts, halls) */
div.link-tile { font-weight: 800; }
.link-tile strong { font-size: 1.05rem; }
/* Follow tiles (kontakt.html, the eight Instagram accounts): handles never break inside a word – one column with the icon beside
   the text on phones, two from 600 px, four from 1024 px */
#folgen .link-tiles { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { #folgen .link-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #folgen .link-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  #folgen .link-tile { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); row-gap: 2px; align-items: center; padding: var(--s3) var(--s4); }
  #folgen .link-tile .icon { grid-row: span 2; }
}
/* A card below a grid of tiles (Twitch below the Instagram accounts) keeps the gap of the grid */
.link-tiles + .social { margin-top: var(--s2); }
/* Three fees (mitmachen.html): stacked on phones, three in a row from 600 px – no empty fourth cell */
#beitraege .link-tiles { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { #beitraege .link-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; } }
/* Documents and the main club (verein.html): rows of a readable length, the main-club card as wide as the sponsor logos */
#dokumente .docs { max-width: 48rem; }
#hauptverein .social { max-width: 36rem; }

/* A function address on its card: a tap area of 44 px, long addresses may break */
.role-card__mail {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-weight: 800; overflow-wrap: anywhere;
}
.role-card__note { font-size: .85rem; color: var(--muted); }
.role-card--first { border-left: 4px solid var(--green); }
.role-card__head .avatar .icon { width: 30px; height: 30px; }
/* Role and name of a function card as its heading – it looks as before (role and name keep their own styles) */
.role-card__title { margin: 0; font: inherit; color: inherit; }

/* Partners and sponsors on the start page: the partner as text, the two sponsor logos beside it */
.partners { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 768px) { .partners { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s5); } }
.partners .sponsors--two { margin-top: 0; }

/* A notice between running text and cards keeps its distance from both */
.section > .notice { margin-block: var(--s3); }

/* Running text below tiles (fees): closer to them than the prose of the legal pages */
.prose--section { margin-top: var(--s4); }

/* History of the department: year and text side by side, stacked on narrow phones */
.timeline { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); max-width: 68ch; }
.timeline li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s2); line-height: 1.6; }
.timeline strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-strong); line-height: 1.3; }
@media (max-width: 400px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* Sponsors of the 1. Damen (logos from the prototype): two cards, the logo on white so that it shows in the dark scheme too */
.sponsors--two { max-width: 36rem; margin-top: var(--s3); }
.sponsor__logo { display: grid; place-items: center; width: 100%; padding: 8px 14px; border-radius: 8px; background: #fff; }
.sponsor__logo img { max-height: 64px; width: auto; height: auto; }

/* Imprint and privacy policy */
.legal h2 { font-size: 1.25rem; }
.legal ul { padding-left: 1.2em; }
.legal address { font-style: normal; }

/* Phone numbers are never split across lines */
a[href^="tel:"] { white-space: nowrap; }

/* Landscape phones and 400 % zoom: the sticky head would cover a quarter of the screen – it scrolls away there, and the tab bar of
   the team page sticks to the top edge instead. The bottom bar stays fixed: below 768 px it is the only navigation. */
@media (max-height: 500px) {
  .topbar { position: relative; }
  .tabs { top: 0; }
  html { scroll-padding-top: var(--s3); }
}

/* Print: without the maintenance band, the chip and tab bars, the slider dots and the closing join block; 'Drucken' on
   training.html prints only the hall plan (the A4 landscape page of site.css) */
@media print {
  .maintenance-bar, .filters, .tabs, .slides__dots, .section:has(> .join:only-child) { display: none !important; }
  main:has(.plan-app) > .section:not(#hallenplan), #hallenplan > .page-lead, #hallenplan > .note { display: none !important; }
}