/* Website-CSS (Dokument v3): das EINZIGE Stylesheet der öffentlichen Seite; im Studio gilt es
   innerhalb von .wsite. Nur --site-*-Variablen (nie --c-* der App), eigene Resets, immer hell.
   Raster: 24 Spalten, Zeile 24 px, Lücke 12 px. Mobil (< 600 px Containerbreite): Widgets stapeln
   in y-Reihenfolge. Widget-Höhe ist MINDESThöhe — Inhalt darf die Zeilen wachsen lassen. */

@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ubuntu-400.woff2) format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ubuntu-700.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/opensans-400.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/opensans-700.woff2) format('woff2'); }

/* --- Rahmen ------------------------------------------------------------------------------------ */
.wsite-body { margin: 0; background: #ffffff; }
.wsite {
  /* Rasterwerte: der Renderer skaliert --ws-row/--ws-gap je Brett mit dessen Breite, damit jedes
     Widget auf jedem Gerät dasselbe Seitenverhältnis behält. */
  --ws-row: 24px; --ws-gap: 12px;
  --site-primary: #f2a600; --site-on-primary: #1a1a1a; --site-secondary: #fff0ce; --site-on-secondary: #1a1a1a;
  --site-bg: #ffffff; --site-text: #222222; --site-radius: 0px; --site-muted: #6b6b6b; --site-line: #e6e6e6;
  --site-font-head: 'Ubuntu', system-ui, Arial, sans-serif; --site-font-body: 'Open Sans', system-ui, Arial, sans-serif;
  container-type: inline-size; container-name: site;
  overflow-x: clip;        /* gedrehte Formen dürfen ragen, aber keinen Rollbalken erzeugen */
  color-scheme: light; background: var(--site-bg); color: var(--site-text);
  font-family: var(--site-font-body); font-size: 16px; line-height: 1.4; min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
.wsite *, .wsite *::before, .wsite *::after { box-sizing: border-box; }
.wsite h1, .wsite h2, .wsite h3, .wsite h4 { font-family: var(--site-font-head); font-weight: 700; margin: 0; line-height: 1.15; color: inherit; }
.wsite p { margin: 0 0 .6em; }
.wsite p:last-child { margin-bottom: 0; }
.wsite ul, .wsite ol { margin: 0 0 .6em 1.2em; padding: 0; }
.wsite a { color: inherit; text-decoration: underline; text-decoration-color: var(--site-ink-primary, var(--site-primary)); text-underline-offset: 2px; }
.wsite a:hover { color: var(--site-ink-primary, var(--site-primary)); }
.wsite img { max-width: 100%; display: block; }
.wsite button { font: inherit; }
.wsite table { border-collapse: collapse; width: 100%; }
.wsite dl { margin: 0; }

/* Füllung der drei Flächen: --band-bg/--band-fg kommen vom Renderer, wenn der Nutzer eine Farbe
   gewählt hat. Ohne Angabe gilt weiterhin genau das Bisherige. */
.wsite-head { background: var(--band-bg, var(--site-primary)); color: var(--band-fg, var(--site-on-primary)); }
.wsite-main { background: var(--band-bg, transparent); color: var(--band-fg, var(--site-text)); display: block; }
/* Kopf- und Fusszeile sind eigene Widget-Bereiche auf demselben 24-Spalten-Raster wie die Seite. */
.wsite-board.wsite-band { padding-block: 8px; min-height: calc(var(--rows, 2) * var(--ws-pitch)); }
.wsite-band .ws-widget > .ws-widget-body { height: 100%; display: flex; flex-direction: column; justify-content: center; }
/* Im Kopf erbt alles die Kopffarbe; Widgets bringen dort keinen eigenen Untergrund mit. */
.wsite-band--head .ws-widget { color: inherit; }
.wsite-band--head .ws-links li a { background: none; color: inherit; border-left: 0; padding: 0; font-family: var(--site-font-head); font-size: 22px; font-weight: 700; }
.wsite-band--head .ws-links { flex-direction: row; gap: 16px; align-items: center; }
.wsite-band--head .ws-h, .wsite-band--head .ws-heading { color: inherit; margin: 0; }
.wsite-band--head .ws-btn { border-color: currentColor; color: inherit; margin-top: 0; }
.wsite-band--head .ws-btn:hover { background: var(--band-fg, var(--site-on-primary)); color: var(--band-bg, var(--site-primary)); }
/* Kopf- und Fusszeile: Bildfelder richten sich nach der Zeilenhöhe des Widgets — ein Logo ist dort
   auf jeder Breite gleich hoch. Das Raster-Verhältnis (--wratio) gilt nur auf der Seite. */
.wsite-band .ws-widget--B1 .ws-figure > a, .wsite-band .ws-widget--B1 .ws-figure > .ws-img,
.wsite-band .ws-widget--B3 .ws-hero-ratio, .wsite-band .ws-widget--B5 .ws-split-image {
  aspect-ratio: auto; height: calc(var(--wh, 2) * var(--ws-pitch) - var(--ws-gap)); }
/* Im Band wird eingepasst, nie zugeschnitten, und der Kasten umschliesst das Bild (Breite auto) —
   die Regel muss .wsite .ws-img--whole schlagen, darum drei Klassen. */
.wsite .wsite-band .ws-img { object-fit: contain; aspect-ratio: auto; width: auto; max-width: 100%;
  max-height: calc(var(--wh, 2) * var(--ws-pitch) - var(--ws-gap)); margin-inline: auto; }
.wsite-foot { background: var(--band-bg, transparent); color: var(--band-fg, var(--site-muted)); font-size: 13px;
  border-top: 1px solid var(--site-line); }
.wsite-foot-by { max-width: 1280px; margin: 0 auto; padding: 8px 24px 16px; font-size: 11px; opacity: .7; }

/* --- Menü (N1) ------------------------------------------------------------------------------------ */
.ws-widget--N1 > .ws-widget-body { justify-content: center; }
.ws-menu { display: flex; }
.ws-menu--left { justify-content: flex-start; }
.ws-menu--center { justify-content: center; }
.ws-menu--right { justify-content: flex-end; }
/* Farben des Knopfs sind einstellbar (N1: icon_color, button_bg). Ohne Angabe bleibt alles wie
   bisher: Farbe und Rahmen erben vom Kopfband, der Hintergrund ist durchsichtig. */
.ws-menu-btn { display: none; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--ws-menu-fg, currentColor);
  background: var(--ws-menu-bg, none); color: var(--ws-menu-fg, inherit); font: inherit; font-weight: 700; cursor: pointer; border-radius: var(--site-radius); }
/* Menü-Symbol: fünf Gestaltungen (N1.icon_style). Alle zeichnen mit currentColor, darum wirken die
   einstellbare Symbolfarbe und der Knopfhintergrund bei jeder. Die Mitte ist der Span, oben und
   unten sind ::before/::after — nur so lässt sich beim Öffnen ein Kreuz daraus machen.
   flex: none behebt nebenbei, dass das Symbol auf schmalen Knöpfen zusammengequetscht wurde. */
.ws-menu-ico { position: relative; flex: none; box-sizing: border-box; width: 18px; height: 2px; background: currentColor; }
.ws-menu-ico::before, .ws-menu-ico::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%;
  background: currentColor; border-radius: inherit; transition: transform .18s ease, top .18s ease; }
.ws-menu-ico::before { top: -6px; }
.ws-menu-ico::after { top: 6px; }
.ws-menu-ico--round { width: 20px; height: 3px; border-radius: 99px; }
.ws-menu-ico--round::before { top: -7px; }
.ws-menu-ico--round::after { top: 7px; }
.ws-menu-ico--bold { width: 14px; height: 4px; }
.ws-menu-ico--ring { width: 28px; height: 28px; background: none; border: 2px solid currentColor; border-radius: 50%; }
.ws-menu-ico--ring::before { top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 0;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.ws-menu-ico--ring::after { content: none; }
.ws-menu-ico--dots { width: 4px; height: 4px; border-radius: 50%; }
.ws-menu-ico--dots::before { top: -7px; }
.ws-menu-ico--dots::after { top: 7px; }
/* Offenes Menü: aus den Strichen wird ein Kreuz (Kreis und Punkte bleiben, wie sie sind). */
.ws-menu.is-open :is(.ws-menu-ico--classic, .ws-menu-ico--round, .ws-menu-ico--bold) { background: transparent; }
.ws-menu.is-open :is(.ws-menu-ico--classic, .ws-menu-ico--round, .ws-menu-ico--bold)::before { top: 0; transform: rotate(45deg); }
.ws-menu.is-open :is(.ws-menu-ico--classic, .ws-menu-ico--round, .ws-menu-ico--bold)::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .ws-menu-ico::before, .ws-menu-ico::after { transition: none; } }
.ws-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.ws-menu-item { position: relative; }
.ws-menu-item > a { display: block; text-decoration: none; padding: 10px 14px; font-weight: 700; color: inherit; border-bottom: 3px solid transparent; white-space: nowrap; }
.ws-menu-item > a:hover, .ws-menu-item > a[aria-current="page"] { border-bottom-color: currentColor; color: inherit; }
.ws-menu-item.has-sub > a::after { content: " ▾"; font-size: .8em; }
.ws-menu-sub { list-style: none; margin: 0; padding: 6px; position: absolute; left: 0; top: 100%; min-width: 190px; display: none; z-index: 6;
  background: var(--band-bg, var(--site-primary)); color: var(--band-fg, var(--site-on-primary)); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.ws-menu-item:hover > .ws-menu-sub, .ws-menu-item:focus-within > .ws-menu-sub { display: block; }
.ws-menu-item.is-open > a { border-bottom-color: currentColor; }   /* aktiver Ast, aber kein Dauer-Flyout */
.ws-menu-sub a { display: block; padding: 8px 10px; text-decoration: none; color: inherit; font-weight: 600; white-space: nowrap; }
.ws-menu-sub a:hover, .ws-menu-sub a[aria-current="page"] { background: rgba(0, 0, 0, .12); }
.ws-menu--right .ws-menu-sub { left: auto; right: 0; }             /* sonst läuft die Klappliste aus dem Bild */
/* Stil «Knopf»: auf jeder Breite nur das Drei-Strich-Symbol, die Reiter klappen auf Klick auf. */
.ws-menu--button { position: relative; }
.ws-menu--button .ws-menu-btn { display: inline-flex; }
.ws-menu--button .ws-menu-list { display: none; position: absolute; top: calc(100% + 6px); min-width: min(210px, 88vw); max-width: 92vw; z-index: 7;
  flex-direction: column; align-items: stretch; padding: 6px; text-align: left;
  background: var(--band-bg, var(--site-primary)); color: var(--band-fg, var(--site-on-primary)); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.ws-menu--button.is-open .ws-menu-list { display: flex; }
.ws-menu--button .ws-menu-sub { position: static; display: block; box-shadow: none; padding: 0 0 0 12px; }
.ws-menu--button .ws-menu-item > a { border-bottom: 0; }
/* Ausrichtung der Klappliste — gilt für den Knopf-Stil wie für das Handy-Menü */
.ws-menu--left .ws-menu-list.is-pop, .ws-menu--left.ws-menu--button .ws-menu-list { left: 0; }
.ws-menu--right .ws-menu-list.is-pop, .ws-menu--right.ws-menu--button .ws-menu-list { right: 0; }
.ws-menu--center.ws-menu--button .ws-menu-list { left: 50%; transform: translateX(-50%); }
/* Wenn die Liste über den Seitenrand ragen würde, kippt sie auf die andere Seite (is-flip). */
.ws-menu.is-flip .ws-menu-list { left: auto; right: 0; transform: none; }
.ws-menu--right.is-flip .ws-menu-list { left: 0; right: auto; }
.ws-menu--center .ws-menu-item:last-child .ws-menu-sub { left: auto; right: 0; }
.wsite-preview-note { background: #fff3cd; color: #5c4400; font: 13px/1.4 system-ui, sans-serif; padding: 6px 12px; text-align: center; }

/* --- Spielplatz (Board) ------------------------------------------------------------------------ */
.wsite-board {
  /* --ws-pitch MUSS hier stehen, nicht auf .wsite: var() in einer Variablen wird dort aufgelöst,
     wo die Variable deklariert ist — sonst käme immer der Grundwert 36 px heraus. */
  --ws-pitch: calc(var(--ws-row) + var(--ws-gap));
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: minmax(var(--ws-row), auto);
  gap: var(--ws-gap); padding: 24px; max-width: 1280px; margin: 0 auto; min-height: calc(var(--rows, 8) * var(--ws-pitch));
}
/* Widgets dürfen sich überlappen: --wz (Reihenfolge in der Liste) entscheidet, was vorn liegt. */
.ws-widget { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: var(--site-radius);
  z-index: var(--wz, auto); }
/* Jedes Brett stapelt für sich — sonst würde ein Seiten-Widget die Klappliste der Kopfzeile verdecken. */
.wsite-board { isolation: isolate; }
.wsite-head { position: relative; z-index: 3; }
.wsite-foot { position: relative; z-index: 1; }
/* Ein offenes Menü liegt immer zuoberst, egal wie viele Widgets danach kommen. */
.ws-widget--N1:hover, .ws-widget--N1:focus-within { z-index: 60; }
.ws-widget--N1:has(.ws-menu.is-open) { z-index: 60; }   /* eigene Regel: :has darf die obige nicht mitreissen */
.ws-widget-body { flex: 1; min-height: 0; min-width: 0; }
.ws-align-center .ws-widget-body { text-align: center; }
.ws-tone-primary > .ws-widget-body { background: var(--site-primary); color: var(--site-on-primary); padding: 16px; border-radius: var(--site-radius); }
.ws-tone-secondary > .ws-widget-body { background: var(--site-secondary); color: var(--site-on-secondary); padding: 16px; border-radius: var(--site-radius); }
.ws-tone-none > .ws-widget-body { background: transparent; }
/* Bild-Widgets zeigen das Bild randlos — sonst schimmert die Tonlage als Rahmen um das Foto
   (auf dem Handy früher sichtbar, weil das Bild dort im Fluss stand). */
.ws-widget--B1 > .ws-widget-body, .ws-widget--B2 > .ws-widget-body,
.ws-widget--B3 > .ws-widget-body, .ws-widget--B4 > .ws-widget-body { padding: 0; background: none; }

/* --- Formen (S1–S4) ---------------------------------------------------------------------------- */
/* Die Zeichnung füllt das Feld; gedrehte Formen dürfen über den Rahmen ragen (Überlappen ist erlaubt). */
.ws-widget[data-type^="S"] > .ws-widget-body { padding: 0; background: none; display: flex; overflow: visible; }
.ws-shape { flex: 1; min-height: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ws-shape * { vector-effect: non-scaling-stroke; }   /* sonst wird die Kontur mitverzerrt */
.ws-widget[data-type^="S"] { align-self: stretch; }
.ws-empty { color: var(--site-muted); font-size: 14px; margin: 0; }
/* Der Platzhalter ist ein Editor-Hinweis: öffentlich unsichtbar, ohne jede Höhe. Sichtbar macht
   ihn website-studio.css — als Überlagerung, damit Anzeigen und Bearbeiten gleich hoch bleiben. */
.ws-placeholder { display: none; }
.ws-muted { color: var(--site-muted); }
.ws-h, .ws-heading { margin-bottom: .4em; }
.ws-heading { margin-bottom: 0; }
h1.ws-heading { font-size: 44px; }
h2.ws-heading { font-size: 30px; }
h3.ws-heading { font-size: 22px; }
.ws-widget h3.ws-h { font-size: 20px; margin-bottom: .5em; }
.ws-group-title { font-size: 24px; margin: 18px 0 10px; }
.ws-group-title:first-child { margin-top: 0; }
.ws-detail { display: grid; gap: 6px 14px; }
.ws-detail > div { display: grid; grid-template-columns: minmax(80px, 34%) 1fr; gap: 8px; align-items: baseline; }
.ws-detail dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--site-muted); }
.ws-detail dd { margin: 0; }

/* --- Termine ------------------------------------------------------------------------------------ */
.ws-events { display: flex; flex-direction: column; gap: 10px; }
.ws-event { background: var(--site-secondary); color: var(--site-on-secondary); border-radius: var(--site-radius); overflow: hidden; }
.ws-event-band { background: var(--site-primary); color: var(--site-on-primary); padding: 10px 12px; }
.ws-event-title { font-weight: 700; font-size: 16px; }
.ws-event-sub { font-size: 12px; opacity: .9; }
.ws-event .ws-detail { padding: 12px 14px; }
.ws-more, .ws-btn { display: inline-block; margin-top: 12px; padding: 9px 16px; border: 2px solid var(--site-primary); background: transparent; color: var(--site-text); font-weight: 700; cursor: pointer; border-radius: var(--site-radius); text-decoration: none; }
.ws-more:hover, .ws-btn:hover { background: var(--site-primary); color: var(--site-on-primary); }
.ws-widget--T3.ws-tone-auto > .ws-widget-body { background: var(--site-primary); color: var(--site-on-primary); padding: 18px; border-radius: var(--site-radius); }
.ws-next { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.ws-next-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.ws-next-title { font-family: var(--site-font-head); font-weight: 700; font-size: 26px; line-height: 1.1; }
.ws-next-when { font-size: 16px; }
.ws-countdown { font-family: var(--site-font-head); font-weight: 700; font-size: 22px; margin-top: 4px; }
.ws-next .ws-detail dt { color: inherit; opacity: .8; }
.ws-table-wrap { overflow-x: auto; }
.ws-table th, .ws-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--site-line); vertical-align: top; }
.ws-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--site-muted); background: var(--site-secondary); }
.ws-table tr.is-past td { color: var(--site-muted); }
.ws-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-slots li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 10px; background: var(--site-secondary); color: var(--site-on-secondary); border-radius: var(--site-radius); }
.ws-slot-day { font-weight: 700; }
.ws-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ws-cal-title { font-family: var(--site-font-head); font-weight: 700; font-size: 20px; }
.ws-cal-nav { width: 34px; height: 34px; border: 2px solid var(--site-primary); background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; border-radius: var(--site-radius); }
.ws-cal-nav:hover { background: var(--site-primary); color: var(--site-on-primary); }
.ws-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ws-cal-wd { font-size: 11px; text-transform: uppercase; color: var(--site-muted); text-align: center; padding: 4px 0; }
.ws-cal-cell { min-height: 64px; border: 1px solid var(--site-line); padding: 3px; border-radius: var(--site-radius); display: flex; flex-direction: column; gap: 2px; }
.ws-cal-cell--empty { border-color: transparent; }
.ws-cal-cell.is-today { border-color: var(--site-primary); box-shadow: inset 0 0 0 1px var(--site-primary); }
.ws-cal-day { font-size: 12px; color: var(--site-muted); }
.ws-cal-ev { display: block; width: 100%; text-align: left; border: 0; padding: 2px 5px; font-size: 11px; line-height: 1.3; cursor: pointer; border-radius: 3px; background: var(--site-secondary); color: var(--site-on-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cal-ev--FS, .ws-cal-ev--MS { background: var(--site-primary); color: var(--site-on-primary); }
.ws-cal-ev--LT, .ws-cal-ev--TT { background: #e9e9e9; color: #222; }
.ws-cal-ev.is-selected { outline: 2px solid var(--site-text); }
.ws-cal-detail { margin-top: 10px; }

/* --- Kader -------------------------------------------------------------------------------------- */
.ws-cards { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 12px; }
.ws-card { display: flex; flex-direction: column; background: var(--site-bg); color: var(--site-text); box-shadow: 0 0 0 1px var(--site-line); border-radius: var(--site-radius); overflow: hidden; }
.ws-widget--K1 .ws-card { height: 100%; }
.ws-card-photo { aspect-ratio: 2 / 3; background: var(--site-secondary); overflow: hidden; }
.ws-card-photo img, .ws-card-photo svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ws-card:hover .ws-card-photo img { transform: scale(1.06); }
.ws-card-name { background: var(--site-primary); color: var(--site-on-primary); font-weight: 700; text-align: center; padding: 12px 8px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-card-lines { list-style: none; margin: 0; padding: 10px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.ws-card-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--site-muted); }
.ws-avatar-ph, .ws-avatar-img { width: 100%; height: 100%; display: block; }
.ws-staff { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; }
.ws-staff-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: 120px; }
.ws-staff-photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--site-secondary); box-shadow: 0 0 0 3px var(--site-primary); margin-bottom: 8px; }
.ws-staff-photo img, .ws-staff-photo svg { width: 100%; height: 100%; object-fit: cover; }
.ws-staff-name { font-weight: 700; font-size: 14px; }
.ws-staff-role { font-size: 12px; color: var(--site-muted); }
.ws-profile { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 16px; height: 100%; }
.ws-profile-photo { aspect-ratio: 2 / 3; overflow: hidden; background: var(--site-secondary); border-radius: var(--site-radius); }
.ws-profile-photo img, .ws-profile-photo svg { width: 100%; height: 100%; object-fit: cover; }
.ws-profile-name { font-size: 24px; margin-bottom: 4px; }
.ws-profile-meta { color: var(--site-muted); font-size: 14px; margin-bottom: 12px; }
.ws-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ws-stat { background: var(--site-secondary); color: var(--site-on-secondary); padding: 10px 8px; text-align: center; border-radius: var(--site-radius); }
.ws-stat-value { font-family: var(--site-font-head); font-weight: 700; font-size: 26px; line-height: 1; }
.ws-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.ws-table--roster td { white-space: nowrap; }

/* --- Bilder ------------------------------------------------------------------------------------- */
/* overflow: hidden gehört auf den Rahmen: ein vergrössertes Bild (transform: scale) wird nur vom
   ELTERN-Element beschnitten, nie von sich selbst — sonst ragt es über das Widget hinaus. */
.ws-figure { margin: 0; display: flex; flex-direction: column; overflow: hidden; }
.ws-figure a { display: block; overflow: hidden; }
/* GANZES BILD (Standard): der Kasten nimmt das Verhältnis des BILDES (--iratio aus den gespeicherten
   Bildmassen). Nichts wird abgeschnitten; das Bild füllt die Breite des Widgets, wird also mit dem
   Widget grösser und kleiner. Sind die Masse unbekannt, bestimmt das geladene Bild selbst die Höhe. */
.wsite .ws-img--whole { width: 100%; height: auto; object-fit: contain; aspect-ratio: var(--iratio, auto);
  max-width: 100%; margin-inline: auto; display: block; }
.ws-figure--whole, .ws-figure--whole > a { overflow: visible; }
.ws-widget--B1 .ws-figure--whole > a, .ws-widget--B1 .ws-figure--whole > .ws-img { aspect-ratio: var(--iratio, auto); }
/* FÜLLEN: der Kasten kommt aus dem Layout des Widgets (--wratio), das Bild wird zugeschnitten —
   auf Desktop, Tablet und Handy derselbe Ausschnitt. */
.ws-widget--B1 .ws-figure--cover > a, .ws-widget--B1 .ws-figure--cover > .ws-img { aspect-ratio: var(--wratio, 16 / 9); overflow: hidden; }
.ws-widget--B1 .ws-figure--cover .ws-img { width: 100%; height: 100%; }
.ws-widget--B3 .ws-hero { overflow: hidden; }
.ws-widget--B5 .ws-split-image--cover { aspect-ratio: var(--wratio-split, 4 / 3); overflow: hidden; }
.ws-widget--B5 .ws-split-image--whole { aspect-ratio: var(--iratio, auto); }
.ws-widget--B1, .ws-widget--B3, .ws-widget--B5 { align-self: start; }   /* Bildfeld bestimmt die Höhe */
.ws-widget--B5 .ws-split-image--cover .ws-img, .ws-widget--B5 .ws-split-image--cover > a { width: 100%; height: 100%; }
.ws-img--cover { object-fit: cover; }
.ws-img--contain { object-fit: contain; }
.ws-figure figcaption { font-size: 13px; color: var(--site-muted); padding: 6px 0 0; }
.ws-widget--B1 figcaption { background: rgba(255, 255, 255, .85); padding: 6px 10px; }
.ws-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; }
.ws-gallery .ws-figure { cursor: zoom-in; }
.ws-gallery { align-items: start; }
.ws-gallery .ws-img--cover { aspect-ratio: 4 / 3; width: 100%; height: auto; }
.ws-gallery .ws-img--whole { aspect-ratio: var(--iratio, 4 / 3); width: 100%; height: auto; }
.ws-hero { position: relative; width: 100%; background-color: var(--site-primary); border-radius: var(--site-radius); overflow: hidden; display: grid; }
/* Ganzes Bild: die Höhe folgt dem Bild, damit nichts abgeschnitten wird (Mannschaftsfoto!).
   Füllen: die Höhe kommt aus dem Layout. */
.ws-hero-ratio { grid-area: 1 / 1; width: 100%; aspect-ratio: var(--wratio, 16 / 9); }
.ws-hero--whole .ws-hero-ratio { aspect-ratio: var(--iratio, var(--wratio, 16 / 9)); }
.ws-hero--whole .ws-hero-img { object-fit: contain; }
.ws-hero > .ws-hero-text { grid-area: 1 / 1; align-self: end; }
.wsite .ws-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
/* Der Schleier liegt hinter dem TEXT, nicht über dem ganzen Bild — sonst dunkelt er Gesichter ab. */
.ws-hero-shade { position: absolute; inset: auto 0 0 0; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%); opacity: var(--overlay, .35); pointer-events: none; }
.ws-hero-card-image, .ws-widget--B3 .ws-split-image { position: relative; }
.ws-hero-image-shade { position: absolute; inset: 0; background: #000; opacity: var(--overlay, .35); pointer-events: none; }
.ws-hero:not(.has-image) .ws-hero-shade { opacity: 0; }
.ws-hero-text { position: relative; padding: 28px 32px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.ws-hero:not(.has-image) .ws-hero-text { color: var(--site-on-primary); text-shadow: none; }
.ws-hero-title { font-size: 48px; line-height: 1.05; }
.ws-hero-sub { font-size: 18px; margin-top: 8px; }
/* Die Höhengrenze gehört auf das BILD, nicht auf den Kasten: eine Prozenthöhe fällt in der
   Handy-Flexspalte auf auto zurück, das Bild kommt dann in Originalgrösse und wurde vom
   überstehenden Kasten abgeschnitten (Logo am Seitenende war auf dem Handy halbiert). */
.ws-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; height: 100%; }
.ws-logo { display: flex; align-items: center; }
.ws-logo a { display: block; }
.wsite .ws-logo img { height: auto; width: auto; max-height: var(--ws-logo-max, 72px); max-width: 180px;
  object-fit: contain; aspect-ratio: auto; }
.ws-logos.is-gray img { filter: grayscale(1); opacity: .8; }
.ws-logos.is-gray img:hover { filter: none; opacity: 1; }
.ws-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; }
.ws-split--right .ws-split-image { order: 2; }
.ws-split-image .ws-img { width: 100%; height: 100%; }

/* --- Text ---------------------------------------------------------------------------------------- */
.ws-widget--X3.ws-tone-auto > .ws-widget-body { background: var(--site-secondary); color: var(--site-on-secondary); padding: 16px 18px; border-radius: var(--site-radius); }
.ws-widget--X5.ws-tone-auto > .ws-widget-body { box-shadow: inset 0 0 0 1px var(--site-line); padding: 16px 18px; border-radius: var(--site-radius); }
.ws-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-links li a { display: block; padding: 8px 10px; background: var(--site-secondary); color: var(--site-on-secondary); text-decoration: none; border-left: 4px solid var(--site-primary); }
.ws-links--buttons { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.ws-links--buttons .ws-btn { margin-top: 0; }

/* --- Lightbox ------------------------------------------------------------------------------------ */
.ws-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.ws-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.ws-lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.ws-lightbox-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; font-size: 26px; cursor: pointer; }

/* --- Mobil: stapeln in y-Reihenfolge ------------------------------------------------------------- */
@container site (max-width: 599px) {
  .wsite-board.wsite-band { padding-block: 8px; padding-inline: 12px; }
  .wsite-band--head .ws-links li a { font-size: 18px; }
  .ws-menu { position: relative; }
  .ws-menu-btn { display: inline-flex; }
  .ws-menu-list { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--band-bg, var(--site-primary)); color: var(--band-fg, var(--site-on-primary));
    flex-direction: column; align-items: stretch; min-width: min(210px, 88vw); max-width: 92vw; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); z-index: 7; }
  .ws-menu--left .ws-menu-list { right: auto; left: 0; }
  .ws-menu--center .ws-menu-list { right: auto; left: 50%; transform: translateX(-50%); }
  .ws-menu.is-open .ws-menu-list { display: flex; }
  .ws-menu-sub { position: static; display: block; box-shadow: none; padding: 0 0 0 12px; }
  .ws-menu-item > a { border-bottom: 0; }
  .wsite-board { display: flex; flex-direction: column; gap: 16px; padding: 12px; min-height: 0; }
  .ws-widget { order: var(--wy, 0); width: 100%; }
  /* Kopf und Fuss bleiben ein Band, auch auf dem Handy: das Logo steht neben dem Menü statt darüber.
     Nur die Spaltenlücke schrumpft; die Zeilenlücke bleibt, damit die Bandhöhen gleich bleiben. */
  /* Im Band zählt auf dem Handy der Inhalt, nicht die Desktop-Spaltenbreite: sonst blieben dem Logo
     6 von 24 Spalten (88 px) und es schrumpfte auf ein Drittel. Die Reihenfolge kommt aus --wy. */
  .wsite-board.wsite-band { display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: minmax(0, auto); justify-content: space-between; align-items: center;
    column-gap: 8px; row-gap: var(--ws-gap); min-height: calc(var(--rows, 2) * var(--ws-pitch)); }
  .wsite-board.wsite-band > .ws-widget { order: var(--wy, 0); width: auto; }
  /* Handy mit eigenem Layout: dieses Brett behält das Raster, statt zu stapeln (gilt auch für
     Kopf- und Fusszeile, sobald man dort von Hand angeordnet hat). */
  .wsite-board.ws-fixgrid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-auto-flow: row; grid-auto-columns: auto; justify-content: stretch; align-items: stretch;
    grid-auto-rows: minmax(var(--ws-row), auto); gap: var(--ws-gap); min-height: calc(var(--rows, 8) * var(--ws-pitch)); }
  .wsite-board.ws-fixgrid > .ws-widget { order: 0; width: auto; }
  /* Kein Sonderformat auf dem Handy: das Bildfeld hat überall dasselbe Seitenverhältnis. */
  .ws-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-profile { grid-template-columns: 1fr; }
  .ws-profile-photo { max-width: 200px; }
  .ws-split { grid-template-columns: 1fr; }
  .ws-hero-title { font-size: 32px; }
  h1.ws-heading { font-size: 32px; }
  .ws-cal-cell { min-height: 44px; }
  .ws-cal-ev { font-size: 10px; padding: 1px 3px; }
  .ws-slots li { grid-template-columns: 1fr; gap: 2px; }
  /* Bild-Widgets bleiben randlos (siehe oben) — sonst entsteht auf dem Handy ein farbiger Rahmen. */
  .ws-widget--T3.ws-tone-auto > .ws-widget-body,
  .ws-tone-primary:not([data-type^="B"]):not([data-type^="S"]) > .ws-widget-body,
  .ws-tone-secondary:not([data-type^="B"]):not([data-type^="S"]) > .ws-widget-body { padding: 16px; }
  /* Auf dem Handy stehen die Widgets im Fluss — die Form braucht dort ihre Höhe aus dem Layout. */
  .ws-widget[data-type^="S"] > .ws-widget-body { aspect-ratio: var(--wratio, 2); }
}
@container site (min-width: 600px) and (max-width: 899px) {
  .ws-cards { grid-template-columns: repeat(min(var(--cols, 4), 4), minmax(0, 1fr)); }
}

/* --- Dokumente: Karte mit Titelseite und scrollbarer Viewer --------------------------------------- */
.ws-doc-icon { width: 22px; height: 22px; flex: none; }
.ws-doc-card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; text-decoration: none; background: var(--site-secondary); color: var(--site-on-secondary); border-radius: var(--site-radius); padding: 10px; margin-bottom: 10px; }
/* Die Dokumentkarte hat einen eigenen hellen Untergrund — dann muss sie auch ihre eigene
   Schriftfarbe mitbringen, sonst erbt sie bei dunkler Füllung des Hauptbereichs weisse Schrift. */
.wsite a.ws-doc-card, .wsite a.ws-doc-card:hover { color: var(--site-on-secondary); }
.ws-doc-card:hover { box-shadow: 0 0 0 2px var(--site-primary); }
.ws-doc-thumb { display: flex; align-items: center; justify-content: center; width: 96px; min-height: 96px; background: #fff; border: 1px solid var(--site-line); overflow: hidden; }
.ws-doc-thumb .ws-doc-icon { width: 40px; height: 40px; color: var(--site-ink-primary, var(--site-primary)); }
.ws-doc-thumb canvas { width: 100%; height: auto; display: block; }
.ws-doc-body { min-width: 0; }
.ws-doc-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ws-doc-meta { display: block; font-size: 12px; color: var(--site-muted); margin-top: 2px; }
.ws-doc-viewer { display: flex; flex-direction: column; border: 1px solid var(--site-line); border-radius: var(--site-radius); overflow: hidden; margin-bottom: 10px; height: calc(var(--wh, 8) * var(--ws-pitch) - var(--ws-gap)); min-height: 240px; }
.ws-doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--site-primary); color: var(--site-on-primary); }
.ws-doc-bar .ws-doc-title { color: inherit; }
.ws-doc-dl { text-decoration: none; font-weight: 700; padding: 5px 10px; border: 2px solid currentColor; border-radius: var(--site-radius); color: inherit; }
.ws-doc-dl:hover { background: rgba(255, 255, 255, .25); color: inherit; }
.ws-doc-pages { flex: 1; min-height: 0; overflow: auto; background: #e8e8e8; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.ws-doc-pageimg { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.ws-doc-cover { width: 100%; height: auto; display: block; }
.ws-doc-bar small { font-weight: 400; opacity: .85; margin-left: 4px; }
.ws-doc-count { font-size: 12px; color: var(--site-muted); text-align: center; padding: 4px 0 2px; }
.ws-doc-iframe { width: 100%; height: 100%; min-height: 240px; border: 0; background: #fff; }
.ws-doc-pages > .ws-empty { padding: 12px; }
@container site (max-width: 599px) { .ws-doc-viewer { height: 70vh; } .ws-doc-card { grid-template-columns: 72px 1fr; } .ws-doc-thumb { width: 72px; min-height: 72px; } }

/* Viewer füllt den Widget-Rahmen (Titel + Viewer), scrollt innen statt das Widget zu sprengen */
.ws-widget--X4.has-viewer > .ws-widget-body { display: flex; flex-direction: column; flex: none; height: calc(var(--wh, 8) * var(--ws-pitch) - var(--ws-gap)); min-height: 260px; }
.ws-widget--X4.has-viewer .ws-doc-viewer { flex: 1; min-height: 0; height: auto; margin-bottom: 0; }
.ws-widget--X4.has-viewer > .ws-widget-body > .ws-h { flex: none; }
@container site (max-width: 599px) {
  .ws-widget--X4.has-viewer > .ws-widget-body { height: auto; min-height: 0; }
  .ws-widget--X4.has-viewer .ws-doc-viewer { flex: none; height: 70vh; }
}

/* Drucken: das Menü als Liste zeigen — ein zugeklappter Knopf wäre auf Papier wertlos. */
@media print {
  /* Der Inline-Massstab stammt aus der Fensterbreite; beim Drucken zählt das Papier. */
  .wsite-board { --ws-row: calc((min(100cqi, 1280px) - 48px) / 1232 * 24) !important;
    --ws-gap: calc((min(100cqi, 1280px) - 48px) / 1232 * 12) !important; }
  .ws-menu-btn { display: none !important; }
  .ws-menu-list { display: flex !important; position: static; flex-direction: row; flex-wrap: wrap;
    box-shadow: none; background: none; color: inherit; transform: none; padding: 0; }
  .ws-menu-sub { position: static; display: block; box-shadow: none; background: none; }
}

/* Widget designs. All layouts use the same renderer in the editor and the public website. */
.ws-widget[data-design="card"] > .ws-widget-body { padding: 18px; border-radius: 12px; background: var(--site-secondary); color: var(--site-on-secondary); box-shadow: 0 3px 14px #00000012; }
.ws-widget[data-design="compact"] > .ws-widget-body { font-size: 13px; line-height: 1.35; }
.ws-widget[data-design="compact"] :is(.ws-event-band, .ws-event .ws-detail, .ws-card-name, .ws-table td, .ws-table th) { padding: 5px 8px; }
.ws-widget[data-design="compact"] .ws-events { gap: 4px; }
.ws-widget[data-design="compact"] .ws-gallery { gap: 4px; }
.ws-widget[data-design="compact"] .ws-richtext :is(p, ul) { margin-bottom: .35em; }
.ws-widget[data-design="compact"][data-type^="S"] > .ws-widget-body { padding: 10px; }
.ws-widget[data-design="outline"] > .ws-widget-body { border: 2px solid var(--site-primary); padding: 12px; border-radius: 6px; }
.ws-widget[data-design="accent"] > .ws-widget-body { border-left: 6px solid var(--site-primary); padding: 12px 16px; background: var(--site-secondary); color: var(--site-on-secondary); }
.ws-widget[data-design="round"] .ws-card { box-shadow: none; background: transparent; align-items: center; padding: 8px; }
.ws-widget[data-design="round"] .ws-card-photo { width: 100%; max-width: 160px; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--site-primary); }
.ws-widget[data-design="round"] .ws-card-name { background: transparent; color: inherit; white-space: normal; }
.ws-widget[data-design="horizontal"] .ws-card { display: grid; grid-template-columns: minmax(45px, 35%) 1fr; align-items: start; }
.ws-widget[data-design="horizontal"] .ws-card-photo { grid-row: 1 / span 3; aspect-ratio: 1; }
.ws-widget[data-design="horizontal"] .ws-card-name { white-space: normal; font-size: 13px; }
.ws-widget[data-design="framed"] .ws-figure { padding: 10px; border: 3px solid var(--site-primary); background: var(--site-secondary); }
.ws-widget[data-design="rounded"] .ws-figure { border-radius: 24px; overflow: hidden; }
.ws-widget[data-design="circle"] .ws-figure { border-radius: 50%; overflow: hidden; }
.ws-widget--B1[data-design="logos"] .ws-figure { aspect-ratio: auto; }
.ws-widget--B1[data-design="logos"] .ws-logos { flex-wrap: wrap; }
.ws-widget--B3[data-design="card"] > .ws-widget-body { padding: 0; overflow: hidden; }
.ws-widget--B3:is([data-design="split-left"], [data-design="split-right"]) .ws-split-image--cover { aspect-ratio: var(--wratio-split, 4 / 3); overflow: hidden; }
.ws-widget--B3:is([data-design="split-left"], [data-design="split-right"]) .ws-split-image--cover :is(.ws-img, a) { width: 100%; height: 100%; }
.ws-richtext { overflow-wrap: anywhere; }
.ws-richtext :is(p, ul) { margin: 0 0 .8em; }
.ws-richtext > :last-child { margin-bottom: 0; }
.ws-richtext mark { background: var(--text-highlight, #fff0a3); color: #171717; padding-inline: .08em; }
.ws-richtext h1.ws-heading { font-size: 2.75em; }
.ws-richtext h2.ws-heading { font-size: 1.875em; }
.ws-richtext h3.ws-heading { font-size: 1.375em; }
/* Editing content never changes the height of a header/footer grid track. Long content is
   scrollable in its own widget; menus must be able to open outside their allocated rectangle. */
.wsite-board.wsite-band { grid-auto-rows: var(--ws-row); align-content: start; }
.wsite-band .ws-widget { height: calc(var(--wh, 2) * var(--ws-pitch) - var(--ws-gap)); align-self: stretch; }
.wsite-band .ws-widget > .ws-widget-body { overflow: auto; flex: 1 1 0; }
.wsite-band .ws-widget--N1 > .ws-widget-body { overflow: visible; }
.wsite-band .ws-widget[data-type^="B"] > .ws-widget-body { overflow: hidden; }
@container site (max-width: 599px) {
  .wsite-board.wsite-band:not(.ws-fixgrid) { grid-auto-rows: auto; }
  .ws-widget[data-design="horizontal"] .ws-cards { grid-template-columns: 1fr; }
}
.wsite-band .ws-widget > .ws-widget-body { justify-content: safe center; }
.ws-hero > a { position: absolute; inset: 0; display: block; }
.ws-hero-ratio { pointer-events: none; }
.ws-grayscale .ws-img { filter: grayscale(1); }
.ws-hero-card-image { position: relative; overflow: hidden; }
.ws-hero-card-image--cover { aspect-ratio: var(--wratio, 16 / 9); }
.ws-hero-card-image--cover :is(a, .ws-img) { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-hero-card-text { padding: 20px; }

/* Selection-formatted text and document viewers retain their complete controls. */
.ws-richtext :is(p,li) { white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-richtext ul { padding-left: 1.5em; list-style: disc; }
.ws-richtext ol { padding-left: 1.7em; list-style: decimal; }
.ws-richtext li { display: list-item; }
.ws-richtext li > p { margin: 0; }
.ws-widget--X1.has-viewer .ws-doc-viewer { height: clamp(320px, 60vh, 680px); min-height: 320px; flex: none; }
.ws-doc-pageimg { flex: 0 0 auto; object-fit: contain; }
.ws-doc-bar { flex: 0 0 auto; flex-wrap: wrap; }
.ws-shape-content { position: relative; width: 100%; height: 100%; min-height: inherit; display: flex; }
.ws-shape-link { display: flex; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.ws-shape-label { position: absolute; inset: 12%; display: grid; place-items: center; text-align: center; line-height: 1.2; overflow-wrap: anywhere; pointer-events: none; }
/* Team colour is visible in the entry as well as in the optional legend. */
.ws-team-tag { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1.4 var(--site-font-body); padding: 2px 7px; border-radius: 5px; background: var(--team-color); color: var(--team-on); margin-right: 5px; vertical-align: middle; }
.ws-event[style] .ws-event-band, .ws-cal-ev[style] { background: var(--team-color); color: var(--team-on); }
.ws-slots li[style], .ws-table tr[style] { border-left: 4px solid var(--team-color); }
.ws-team-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; font: 12px/1.4 var(--site-font-body); }
.ws-team-legend > span { display:flex; align-items:center; gap:6px; }
.ws-team-legend i { width:9px; height:9px; border-radius:50%; background:var(--team-color); flex:none; }
.ws-team-legend[data-legend=pills] > span { background:var(--team-color);color:var(--team-on);padding:5px 10px;border-radius:20px; }
.ws-team-legend[data-legend=pills] i { background:currentColor;width:5px;height:5px; }
.ws-team-legend[data-legend=cards] > span { border:1px solid var(--site-line);border-top:5px solid var(--team-color);padding:10px 16px;min-width:80px;justify-content:center; }
.ws-team-legend[data-legend=cards] i {display:none;}
.ws-team-legend[data-legend=lines] > span {border-bottom:3px solid var(--team-color);padding:4px 0 8px;}
.ws-team-legend[data-legend=lines] i {width:20px;height:3px;border-radius:0;}
.ws-team-legend[data-legend=compact] {gap:0;border:1px solid var(--site-line);width:fit-content;}
.ws-team-legend[data-legend=compact] > span {padding:3px 7px;border-right:1px solid var(--site-line);}
.ws-team-legend[data-legend=compact] i {border-radius:0;width:6px;height:14px;}
/* Event structures: tickets, timeline, grouped agenda and a lead event. */
.ws-widget[data-type^=T]:not([data-design=classic]) > .ws-widget-body { padding:0;background:transparent;border:0;box-shadow:none; }
.ws-event-tile { display:flex;gap:16px;min-width:0; }
.ws-event-date {flex:0 0 70px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:11px;color:var(--team-ink,var(--team-color));}
.ws-event-date b {font-size:34px;line-height:1.2;}
.ws-event-copy {min-width:0;flex:1;}
.ws-event-copy h3 {font-size:17px;margin:6px 0;}
.ws-event-copy .ws-detail {font-size:12px;}
.ws-event-when {display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;margin:4px 0 8px;}
.ws-event-day {display:none;}
:is(.ws-event-timeline,.ws-event-agenda) .ws-event-day {display:inline;}
.ws-week-event .ws-detail > div {display:block;}
.ws-week-event .ws-detail dt,.ws-event-spotlight .ws-detail dt,.ws-game-posters .ws-detail dt {color:inherit;opacity:.8;}
.ws-event-tickets {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;}
.ws-event-tickets .ws-event-tile {background:var(--site-secondary);border-radius:12px;padding:16px 12px;border-top:5px solid var(--team-color);}
.ws-event-tickets .ws-event-date {border-right:2px dashed var(--site-line);padding-right:12px;}
.ws-event-timeline {list-style:none;margin:0 0 0 16px;padding:0 0 0 24px;border-left:2px solid var(--site-line);}
.ws-event-timeline > li {position:relative;padding:12px 0 20px;}
.ws-event-timeline > li::before {content:'';position:absolute;width:14px;height:14px;left:-32px;top:22px;background:var(--team-color);border:3px solid var(--site-bg);border-radius:50%;}
.ws-event-timeline .ws-event-date {display:none;}
.ws-event-agenda > section {display:grid;grid-template-columns:max-content minmax(0,1fr);border-top:1px solid var(--site-line);padding:16px 0;gap:24px;}
.ws-event-agenda header {font-size:15px;font-weight:700;padding-top:8px;white-space:nowrap;}
.ws-event-agenda .ws-event-date {display:none;}
.ws-event-agenda .ws-event-tile {padding:8px 0;border-bottom:1px solid var(--site-line);}
.ws-event-spotlight {display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:var(--team-color,var(--site-primary));color:var(--team-on,var(--site-on-primary));padding:32px;border-radius:4px;}
.ws-event-spotlight > strong {font-size:36px;line-height:1.1;}
.ws-event-spotlight > small {letter-spacing:.2em;}
.ws-event-spotlight .ws-detail {width:100%;color:inherit;}
.ws-event-after {margin-top:20px;display:grid;gap:16px;}
.ws-game-posters {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:20px;}
.ws-game-posters article {display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:28px 16px;background:var(--team-color);color:var(--team-on);border-radius:2px;}
.ws-game-posters strong {font-size:26px;line-height:1.1;}
.ws-game-date {font:600 13px var(--site-font-body);letter-spacing:.08em;}
.ws-versus {font:900 italic 50px/1 var(--site-font-head);opacity:.5;}
/* Five calendar views have independent navigation and preserve team colours. */
.ws-calendar-agenda {display:flex;flex-direction:column;gap:0;}
.ws-calendar-agenda .ws-event-tile {padding:18px 4px;border-bottom:1px solid var(--site-line);}
.ws-calendar-week {display:grid;grid-template-columns:repeat(7,minmax(85px,1fr));overflow-x:auto;border:1px solid var(--site-line);}
.ws-calendar-week > section {border-right:1px solid var(--site-line);min-height:230px;background:var(--site-bg);}
.ws-calendar-week h4 {margin:0;padding:10px 5px;text-align:center;background:var(--site-secondary);font-size:12px;}
.ws-week-event {display:flex;flex-direction:column;gap:6px;margin:6px;padding:8px 5px;background:var(--team-color);color:var(--team-on);border-radius:4px;font-size:11px;}
.ws-week-event .ws-team-tag {font-size:9px;padding:0;}
.ws-week-navigation {display:flex;justify-content:space-between;gap:8px;padding:10px 0;font-size:12px;}
.ws-calendar-year {display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:16px;}
.ws-mini-month {padding:12px;border:1px solid var(--site-line);border-radius:6px;background:var(--site-bg);color:var(--site-text);text-align:left;}
.ws-mini-month > b {font-size:14px;display:block;margin-bottom:8px;}
.ws-mini-month small {display:block;margin-top:8px;opacity:.6;}
.ws-mini-grid {display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:10px;text-align:center;}
.ws-mini-grid span {padding:2px;}
.ws-mini-grid .has-event {background:var(--team-color);color:var(--team-on);border-radius:50%;}
.ws-calendar-focus {display:grid;grid-template-columns:50px 1fr;gap:20px;background:var(--site-secondary);padding:16px;}
.ws-day-rail {display:flex;flex-direction:column;max-height:400px;overflow:auto;gap:5px;}
.ws-day-rail button {border:0;background:transparent;color:var(--site-text);padding:8px;border-radius:50%;}
.ws-day-rail .is-current {background:var(--site-primary);color:var(--site-on-primary);}
.ws-focus-date {font-size:30px;font-weight:700;margin:12px 0 24px;}
.ws-calendar-focus .ws-event-date {display:none;}
/* Training: day cards, time table, venues, punched tickets. */
.ws-training-days {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.ws-training-days section {border:1px solid var(--site-line);border-radius:12px;overflow:hidden;}
.ws-training-days header {background:var(--site-primary);color:var(--site-on-primary);padding:16px;font-weight:700;}
.ws-training-days section > div {display:flex;flex-direction:column;gap:8px;padding:16px;border-left:4px solid var(--team-color);}
.ws-training-timetable {overflow-x:auto;}
.ws-training-timetable table {width:100%;border-collapse:collapse;table-layout:fixed;min-width:560px;}
.ws-training-timetable :is(th,td) {border:1px solid var(--site-line);vertical-align:top;padding:8px;font-size:12px;}
.ws-training-timetable th {background:var(--site-secondary);}
.ws-training-timetable td > div {display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--team-color);padding-top:8px;margin-bottom:14px;}
.ws-training-places section {display:grid;grid-template-columns:1fr 2fr;gap:8px 24px;border-top:2px solid var(--site-primary);padding:16px 0;}
.ws-training-places h3 {grid-row:1 / span 10;margin:8px 0;}
.ws-training-places section > div {display:flex;flex-direction:column;border-left:4px solid var(--team-color);padding:8px 12px;gap:5px;}
.ws-training-tickets {display:grid;gap:14px;}
.ws-training-tickets article {display:grid;grid-template-columns:1fr 2fr;border-radius:10px;overflow:hidden;background:var(--site-secondary);}
.ws-training-tickets article > div {display:grid;place-items:center;padding:20px;background:var(--team-color);color:var(--team-on);font-weight:700;}
.ws-training-tickets section {display:flex;flex-direction:column;gap:8px;padding:18px;border-left:2px dashed var(--site-bg);}
/* Portraits and profile compositions. */
.ws-widget[data-type^=K]:not([data-design=classic]) > .ws-widget-body {border:0;padding:0;background:transparent;box-shadow:none;}
.ws-widget--K1[data-design=card] .ws-card {display:grid;grid-template-columns:40% 1fr;border:1px solid var(--site-line);border-radius:16px;padding:16px;gap:12px;align-items:center;}
.ws-widget--K1[data-design=card] .ws-card-photo {grid-row:1 / span 3;aspect-ratio:1;border-radius:50%;}
.ws-widget--K1[data-design=card] .ws-card-name {background:none;color:var(--site-text);white-space:normal;text-align:left;font-size:20px;}
.ws-widget--K1[data-design=compact] .ws-card {align-items:center;box-shadow:none;background:transparent;text-align:center;}
.ws-widget--K1[data-design=compact] .ws-card-photo {width:75%;aspect-ratio:1;border-radius:50%;border:6px solid var(--site-primary);}
.ws-widget--K1[data-design=compact] .ws-card-name {background:none;color:var(--site-text);font-size:22px;white-space:normal;}
.ws-widget--K1[data-design=outline] .ws-card {padding:24px;background:linear-gradient(90deg,var(--site-primary) 35%,var(--site-secondary) 35%);box-shadow:none;}
.ws-widget--K1[data-design=outline] .ws-card-name {align-self:flex-end;background:var(--site-bg);color:var(--site-text);max-width:85%;margin-top:-24px;z-index:1;white-space:normal;font-size:26px;text-align:right;}
.ws-widget--K1[data-design=accent] .ws-card {position:relative;min-height:300px;background:#171717;}
.ws-widget--K1[data-design=accent] .ws-card-photo {width:100%;aspect-ratio:3/4;}
.ws-widget--K1[data-design=accent] .ws-card-name {position:absolute;inset:auto 0 0;padding:50px 20px 24px;white-space:normal;text-align:left;font-size:30px;background:linear-gradient(transparent,#000d);color:#fff;}
.ws-widget--K2[data-design=horizontal] .ws-cards {grid-template-columns:1fr;gap:0;}
.ws-widget--K2[data-design=horizontal] .ws-card {grid-template-columns:70px 1fr;box-shadow:none;border-bottom:1px solid var(--site-line);padding:12px;gap:16px;background:transparent;}
.ws-widget--K2[data-design=horizontal] .ws-card-name {text-align:left;background:transparent;color:var(--site-text);font-size:18px;}
.ws-widget--K2[data-design=compact] .ws-cards {display:flex;flex-wrap:wrap;justify-content:center;gap:24px 10px;padding:24px;background:var(--site-primary);color:var(--site-on-primary);}
.ws-widget--K2[data-design=compact] .ws-card {width:calc(100% / var(--cols) - 10px);min-width:70px;box-shadow:none;background:transparent;color:var(--site-on-primary);}
.ws-widget--K2[data-design=compact] .ws-card-photo {aspect-ratio:1;border-radius:35% 35% 4px 4px;}
.ws-widget--K2[data-design=compact] .ws-card-name {font-size:12px;white-space:normal;background:none;color:inherit;}
.ws-widget--K2[data-design=outline] .ws-cards {grid-template-columns:repeat(2,1fr);gap:30px;}
.ws-widget--K2[data-design=outline] .ws-card {box-shadow:none;background:transparent;position:relative;}
.ws-widget--K2[data-design=outline] .ws-card:nth-child(even) {margin-top:40px;}
.ws-widget--K2[data-design=outline] .ws-card-name {background:var(--site-bg);color:var(--site-text);text-align:left;border-left:4px solid var(--site-primary);white-space:normal;margin:-16px 0 0 14px;z-index:1;font-size:20px;}
.ws-name-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.ws-name-cards article {padding:20px;border-top:5px solid var(--site-primary);background:var(--site-secondary);border-radius:8px;}
.ws-name-cards b {font-size:19px;}
.ws-name-cards article div {display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.ws-name-numbered {counter-reset:person;list-style:none;padding:0;margin:0;}
.ws-name-numbered li {counter-increment:person;display:grid;grid-template-columns:40px 1fr;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--site-line);}
.ws-name-numbered li::before {content:counter(person,decimal-leading-zero);grid-row:1 / span 2;font-size:24px;color:var(--site-ink-primary,var(--site-primary));}
.ws-name-numbered li div {display:flex;gap:12px;font-size:12px;}
.ws-name-index {columns:2;column-gap:30px;}
.ws-name-index section {break-inside:avoid;margin-bottom:24px;}
.ws-name-index h3 {font-size:36px;color:var(--site-ink-primary,var(--site-primary));border-bottom:2px solid currentColor;margin:0 0 10px;}
.ws-name-index section > div {display:flex;flex-direction:column;padding:8px 0;gap:4px;}
.ws-name-jerseys {display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.ws-name-jerseys article {display:flex;gap:14px;align-items:center;padding:12px;background:var(--site-secondary);}
.ws-name-jerseys article > div {display:flex;flex-direction:column;gap:5px;}
.ws-jersey {display:grid;place-items:center;min-width:55px;height:65px;background:var(--site-primary);color:var(--site-on-primary);clip-path:polygon(15% 0,35% 0,40% 8%,60% 8%,65% 0,85% 0,100% 20%,85% 35%,80% 28%,80% 100%,20% 100%,20% 28%,15% 35%,0 20%);font-weight:900;font-size:24px;}
.ws-widget--K5[data-design=card] .ws-profile {grid-template-columns:1fr;border-radius:20px;padding:28px;background:#172133;color:#fff;text-align:center;}
.ws-widget--K5[data-design=card] .ws-profile-photo {max-width:190px;margin:auto;border:6px solid var(--site-primary);border-radius:50%;aspect-ratio:1;overflow:hidden;}
.ws-widget--K5[data-design=card] .ws-stats {background:#ffffff16;border-radius:12px;padding:16px;}
.ws-widget--K5[data-design=compact] .ws-profile {grid-template-columns:90px 1fr;gap:20px;padding:18px;border-block:3px solid var(--site-primary);}
.ws-widget--K5[data-design=compact] .ws-profile-photo {aspect-ratio:1;max-height:90px;overflow:hidden;border-radius:50%;}
.ws-widget--K5[data-design=compact] .ws-profile-name {font-size:19px;margin:0;}
.ws-widget--K5[data-design=compact] .ws-stats {display:flex;justify-content:space-between;gap:12px;}
.ws-widget--K5[data-design=compact] .ws-stat-value {font-size:26px;}
.ws-widget--K5[data-design=outline] .ws-profile {grid-template-columns:1fr 110px;gap:24px;background:var(--site-secondary);padding:24px;}
.ws-widget--K5[data-design=outline] .ws-profile-photo {grid-column:2;grid-row:1;}
.ws-widget--K5[data-design=outline] .ws-profile-info {grid-column:1;grid-row:1;}
.ws-widget--K5[data-design=outline] .ws-stats {display:flex;flex-direction:column;gap:0;}
.ws-widget--K5[data-design=outline] .ws-stat {display:flex;flex-direction:row-reverse;justify-content:space-between;border-bottom:1px solid var(--site-line);padding:10px 0;align-items:center;}
.ws-widget--K5[data-design=outline] .ws-stat-value {font-size:22px;}
.ws-widget--K5[data-design=accent] .ws-profile {display:grid;grid-template-columns:1fr 1fr;background:var(--site-primary);color:var(--site-on-primary);padding:0;gap:0;overflow:hidden;}
.ws-widget--K5[data-design=accent] .ws-profile-photo {grid-column:1 / -1;grid-row:1;max-height:500px;overflow:hidden;}
.ws-widget--K5[data-design=accent] .ws-profile-info {grid-column:1 / -1;grid-row:1;z-index:1;background:linear-gradient(transparent 20%,#000d);color:white;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;}
.ws-widget--K5[data-design=accent] .ws-profile-name {font-size:44px;text-transform:uppercase;line-height:1;}
/* Title pictures: cinematic, editorial split, diagonal stage, floating card, typography poster. */
.ws-widget--B3 > .ws-widget-body {padding:0 !important;box-shadow:none;border:0;}
.ws-widget--B3[data-design=classic] .ws-hero-text {text-align:center;padding:50px 8%;}
.ws-widget--B3[data-design=classic] .ws-hero-title {font-size:clamp(32px,5vw,64px);text-transform:uppercase;letter-spacing:.05em;}
.ws-widget--B3[data-design=split-left] .ws-split {grid-template-columns:3fr 2fr;gap:0;background:var(--site-secondary);color:var(--site-on-secondary);}
.ws-widget--B3[data-design=split-left] .ws-split-text {padding:36px;align-self:center;}
.ws-widget--B3[data-design=split-left] .ws-split-text h3 {font-size:42px;line-height:1.05;border-top:6px solid var(--site-primary);padding-top:22px;}
.ws-hero-layout {display:grid;position:relative;min-height:300px;}
.ws-hero-visual {min-width:0;position:relative;overflow:hidden;}
.ws-hero-visual :is(a,.ws-img) {display:block;width:100%;height:100%;}
.ws-hero-visual .ws-img {object-fit:cover;}
.ws-hero-visual .ws-img--whole {object-fit:contain;}
.ws-hero-panel {padding:32px;z-index:1;align-self:center;}
.ws-hero-panel .ws-hero-title {font-size:42px;line-height:1.06;margin:0 0 20px;}
.ws-hero-layout--split-right {grid-template-columns:1fr 1fr;background:var(--site-primary);color:var(--site-on-primary);}
.ws-hero-layout--split-right .ws-hero-visual {grid-column:1 / -1;grid-row:1;clip-path:polygon(40% 0,100% 0,100% 100%,60% 100%);}
.ws-hero-layout--split-right .ws-hero-panel {grid-column:1;grid-row:1;align-self:center;}
.ws-hero-layout--card {grid-template-columns:1fr 1fr;grid-template-rows:240px auto;padding-bottom:20px;}
.ws-hero-layout--card .ws-hero-visual {grid-column:1 / -1;grid-row:1 / -1;}
.ws-hero-layout--card .ws-hero-panel {grid-column:1 / -1;grid-row:2;background:var(--site-bg);color:var(--site-text);box-shadow:0 12px 35px #0003;margin:0 8%;border-top:6px solid var(--site-primary);}
.ws-hero-layout--minimal {grid-template-columns:3fr 2fr;gap:16px;padding:30px;background:var(--site-secondary);color:var(--site-on-secondary);}
.ws-hero-layout--minimal .ws-hero-visual {grid-column:2;grid-row:1;aspect-ratio:1;border-radius:50%;align-self:center;}
.ws-hero-layout--minimal .ws-hero-panel {grid-column:1;grid-row:1;padding:0;}
.ws-hero-layout--minimal .ws-hero-title {font-size:56px;letter-spacing:-.055em;}
/* Picture tools are independent and combinable; no picture design selector. */
.ws-widget--B1 .ws-figure {border-radius:var(--picture-radius,0);}
.ws-widget--B1[data-picture-frame=line] .ws-figure {border:var(--picture-frame-width) solid var(--picture-frame);}
.ws-widget--B1[data-picture-frame=double] .ws-figure {border:calc(var(--picture-frame-width) + 3px) double var(--picture-frame);}
.ws-widget--B1[data-picture-frame=matte] .ws-figure {padding:18px;background:var(--picture-frame);box-shadow:0 2px 8px #0003;}
.ws-widget--B1[data-picture-frame=polaroid] .ws-figure {padding:12px 12px 35px;background:var(--picture-frame);box-shadow:0 4px 12px #0004;}
.ws-widget--B1[data-picture-frame=shadow] .ws-figure {box-shadow:0 12px 22px #0005;}
.ws-picture-reflection {transform:scaleY(-1);max-height:100px;overflow:hidden;mask-image:linear-gradient(transparent,#0009);pointer-events:none;margin-top:6px !important;}
/* Menu colours work for tabs and icons in every viewport. */
.ws-menu {color:var(--menu-primary,var(--site-text));}
.ws-menu--tabs > .ws-menu-list {gap:6px;}
.ws-menu--tabs .ws-menu-item > a {padding:10px 14px;border:0;color:var(--menu-ink,var(--menu-primary));}
.ws-menu--tabs[data-menu-design=underline] .ws-menu-item > a {border-bottom:3px solid transparent;}
.ws-menu--tabs[data-menu-design=underline] .ws-menu-item > a[aria-current], .ws-menu--tabs[data-menu-design=underline] .ws-menu-item > a:hover {border-color:var(--menu-primary);background:var(--menu-secondary);}
.ws-menu--tabs[data-menu-design=pills] .ws-menu-item > a {border-radius:24px;background:var(--menu-secondary);}
.ws-menu--tabs[data-menu-design=pills] .ws-menu-item > a[aria-current] {background:var(--menu-primary);color:var(--menu-on-primary);}
.ws-menu--tabs[data-menu-design=segments] > .ws-menu-list {gap:0;background:var(--menu-secondary);padding:4px;border:1px solid var(--menu-primary);border-radius:4px;}
.ws-menu--tabs[data-menu-design=segments] .ws-menu-item > a {border-right:1px solid var(--menu-primary);border-radius:0;}
.ws-menu--tabs[data-menu-design=segments] .ws-menu-item > a[aria-current] {background:var(--menu-primary);color:var(--menu-on-primary);}
.ws-menu--tabs[data-menu-design=cards] .ws-menu-item > a {background:var(--menu-secondary);border:1px solid var(--menu-primary);box-shadow:3px 3px 0 var(--menu-primary);margin:0 4px 4px 0;transform:rotate(-2deg);border-radius:2px;}
.ws-menu--tabs[data-menu-design=cards] .ws-menu-item > a[aria-current] {background:var(--menu-primary);color:var(--menu-on-primary);transform:rotate(0);}
.ws-menu--tabs[data-menu-design=rail] .ws-menu-item > a {border-left:5px solid var(--menu-primary);padding:6px 16px;background:var(--menu-secondary);text-transform:uppercase;letter-spacing:.06em;font-size:12px;}
.ws-menu--tabs[data-menu-design=rail] .ws-menu-item > a[aria-current] {border-left-width:12px;font-weight:900;}
.ws-menu-btn {background:var(--menu-secondary);color:var(--menu-ink,var(--menu-primary));border-color:var(--menu-primary);}
.ws-menu--button .ws-menu-btn {display:inline-flex;min-height:44px;}
.ws-menu--button > .ws-menu-list {background:var(--menu-secondary);color:var(--menu-ink,var(--menu-primary));border:1px solid var(--menu-primary);}
:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--round {width:25px;height:25px;background:radial-gradient(circle,currentColor 2px,transparent 3px) 0 0 / 9px 9px;border:0;border-radius:0;}
:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--round::before,:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--round::after {display:none;}
:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--bold {width:44px;height:24px;border:0;background:none;}
:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--bold::before {content:'MENU';position:static;display:block;background:none;width:auto;height:auto;box-shadow:none;transform:none;font:900 12px/24px var(--site-font-body);letter-spacing:.05em;}
:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--bold::after {display:none;}
:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--ring {width:28px;height:28px;border:2px solid currentColor;border-radius:50%;background:none;}
:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--ring::before {content:'';position:absolute;left:6px;top:11px;width:12px;height:2px;box-shadow:none;background:currentColor;transform:none;}
:is(.ws-menu--button,.ws-icon-opt) .ws-menu-ico--ring::after {content:'';position:absolute;left:11px;top:6px;width:2px;height:12px;box-shadow:none;background:currentColor;transform:none;}
@container site (max-width:599px) {
  .ws-hero-layout--minimal,.ws-widget--B3[data-design=split-left] .ws-split {grid-template-columns:1fr;}
  .ws-hero-layout--minimal .ws-hero-visual {grid-column:1;grid-row:2;max-height:200px;}
  .ws-hero-layout--minimal .ws-hero-title {font-size:40px;}
  .ws-event-agenda > section {grid-template-columns:1fr;gap:4px;}
}