/* TCS Turniere – front-end bracket
   ------------------------------------------------------------------
   The draw is a row of columns. Column r holds size/2^r participant
   slots; every slot draws its horizontal rule at its own vertical
   centre, so the winner shown in the next column lands exactly on the
   midpoint of the two slots it came from. That is what produces the
   classic tennis draw shape without a single hard-coded coordinate. */

.tcs-tournament,
.tcs-draw {
	--tcs-title: #16375f;
	--tcs-sub: #e2662d;
	--tcs-line: #222;
	--tcs-muted: #9a9a9a;
	--tcs-gold: #d4af37;
	--tcs-row-h: 64px;
	--tcs-font: inherit;
}

.tcs-draw {
	background: #fff;
	color: #1a1a1a;
	font-family: var(--tcs-font);
	padding: 1.5em 1.25em 1.25em;
	box-sizing: border-box;
}

.tcs-draw * {
	box-sizing: border-box;
}

/* ---------- header ---------- */

.tcs-draw__head {
	position: relative;
	margin-bottom: 1.75em;
	min-height: 3em;
}

.tcs-draw__titles {
	text-align: center;
	padding: 0 5.5em;
}

.tcs-draw__title {
	color: var(--tcs-title);
	font-weight: 800;
	font-size: clamp(1.35rem, 3.2vw, 2.35rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.tcs-draw__sub {
	color: var(--tcs-sub);
	font-weight: 700;
	font-size: clamp(1.05rem, 2.4vw, 1.7rem);
	line-height: 1.2;
	margin-top: 0.15em;
}

.tcs-draw__logo {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(56px, 8vw, 96px);
}

.tcs-draw__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- bracket ---------- */

.tcs-draw__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5em;
}

.tcs-bracket {
	display: flex;
	align-items: stretch;
	min-width: 960px;
	font-size: clamp(0.85rem, 1.15vw, 1.06rem);
}

.tcs-bracket[data-size="4"] {
	min-width: 520px;
}

.tcs-bracket[data-size="8"] {
	min-width: 680px;
}

.tcs-draw--doubles .tcs-bracket {
	min-width: 1040px;
}

.tcs-draw--doubles .tcs-bracket[data-size="4"] {
	min-width: 620px;
}

.tcs-draw--doubles .tcs-bracket[data-size="8"] {
	min-width: 820px;
}

.tcs-bracket[data-size="32"] {
	min-width: 1040px;
}

.tcs-bracket__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.tcs-bracket__col--winner {
	flex: 0 0 8.5em;
}

.tcs-bracket__label:empty::before {
	content: "\00a0";
}

.tcs-bracket__label {
	font-weight: 700;
	color: #111;
	padding: 0 0.7em 1.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tcs-bracket__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: calc(var(--tcs-rows, 16) * var(--tcs-row-h, 64px));
}

.tcs-bracket__match {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 0;
}

/* vertical connector: joins the two rules of a pairing */
.tcs-bracket__match::after {
	content: "";
	position: absolute;
	right: 0;
	top: 25%;
	bottom: 25%;
	border-right: 1px solid var(--tcs-line);
}

.tcs-bracket__col--winner .tcs-bracket__match::after {
	display: none;
}

.tcs-slot {
	flex: 1 1 0;
	position: relative;
	min-height: 0;
	padding: 0 0.7em;
}

/* horizontal rule at the slot's exact vertical centre */
.tcs-slot::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-bottom: 1px solid var(--tcs-line);
}

.tcs-slot__inner {
	position: absolute;
	left: 0.7em;
	right: 0.7em;
	bottom: 50%;
	padding-bottom: 0.25em;
	text-align: left;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.tcs-slot__seed {
	margin-right: 0.35em;
	font-variant-numeric: tabular-nums;
}

.tcs-slot__note {
	margin-left: 0.35em;
}

/* The result belongs to the pairing, not to either player, so it is drawn on
   the connector at the exact midpoint between the two names. The background
   breaks the vertical line behind it, which reads as a badge on the join.
   z-index lifts it above .tcs-bracket__match::after, which paints last. */
/* Everything that belongs to the match rather than to one of its players sits
   at the fork, where the two rules meet: the appointment on the upper line,
   the result on the lower one. The block has to clear the lower player's name
   — that name floats just above its own rule, only a few pixels below the
   fork — hence the extra lift on top of the centring. */
.tcs-bracket__meta {
	position: absolute;
	left: 0.7em;
	right: 0.3em;
	top: 50%;
	transform: translateY(calc(-50% - 0.55em));
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2em;
	pointer-events: none;
}

.tcs-bracket__result {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.25em;
	padding: 0.15em 0.35em;
	background: #fff;
}

/* Day and court side by side, the result on the line below — the same two rows
   the editor shows, so what the tournament director fills in is laid out the
   way the page will read it. Stacked rather than one long line because in a
   narrow column the appointment used to be squeezed out by the result. */
.tcs-bracket__when {
	display: flex;
	align-items: center;
	gap: 0.25em;
	max-width: 100%;
	min-width: 0;
}

/* Date, time, court. Same button shape as a score so the badges read as one
   family, but quieter — it is the appointment, not the outcome. */
.tcs-info {
	flex: 0 1 auto;
	max-width: 100%;
	min-width: 0;
	padding: 0.06em 0.45em;
	border: 1px solid #e1e6ec;
	border-radius: 4px;
	background: #fff;
	color: var(--tcs-muted);
	font-size: 0.8em;
	line-height: 1.55;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Playing today. Green, small, and it swings: on a 32-slot draw the eye finds
   the two or three matches that are on court right now without reading a single
   date. It rests most of the cycle so a page full of them does not flicker. */
/* The winner's crown, next to the name on the public page. Gold from the
   Einstellungen so it sits in the same family as the Siegerweg, and it never
   swings — it is a statement of fact, not of something happening now. */
.tcs-crown {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: 0.4em;
	vertical-align: middle;
}

.tcs-crown svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
	fill: var(--tcs-gold, #e3a51c);
	stroke: rgba(0, 0, 0, 0.28);
	stroke-width: 1.1;
	stroke-linejoin: round;
}

.tcs-today {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: 0.55em;
	color: #16a34a;
	vertical-align: middle;
}

.tcs-today svg {
	display: block;
	width: 1.25em;
	height: 1.25em;
	transform-origin: 76% 86%;
	animation: tcs-swing 2.6s ease-in-out infinite;
}

@keyframes tcs-swing {
	0%, 58%, 100% {
		transform: rotate(-13deg);
	}
	70% {
		transform: rotate(15deg) scale(1.06);
	}
	82% {
		transform: rotate(-6deg);
	}
}

/* A marker that never stops moving is a problem for some readers — it stays,
   it just stops swinging. */
@media (prefers-reduced-motion: reduce) {
	.tcs-today svg {
		animation: none;
		transform: rotate(-13deg);
	}
}

/* The racket belongs to the match, not to the player: while a match is on
   court both names carry it, the one who is behind included. It used to be
   hidden on the losing side, which was invisible as long as a crown took the
   racket away anyway — the moment the two were allowed to stand together, it
   left the loser of a running match unmarked. The crown is a different case
   and stays hidden there: a name that lost is never also crowned. */
.tcs-slot.is-lost .tcs-crown,
.tcs-rounds__side.is-lost .tcs-crown {
	display: none;
}

/* Outside its playing window the marker is switched off from the browser. The
   rule is needed because display:inline-flex above would otherwise beat the
   user agent's [hidden]. */
.tcs-today[hidden] {
	display: none;
}

.tcs-set {
	display: inline-block;
	padding: 0.06em 0.45em;
	border: 1px solid #dde2e8;
	border-radius: 4px;
	background: #eef1f5;
	color: #2b3440;
	font-size: 0.86em;
	line-height: 1.55;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tcs-set--text {
	background: transparent;
	border-style: dashed;
	font-weight: 400;
	font-style: italic;
}


.tcs-slot.is-lost .tcs-slot__inner {
	color: var(--tcs-muted);
}

.tcs-slot.is-lost::after {
	border-bottom-color: var(--tcs-muted);
}

.tcs-slot--champion .tcs-slot__inner {
	font-weight: 700;
}

.tcs-slot__champion-label {
	position: absolute;
	left: 0.7em;
	top: 50%;
	margin-top: 0.25em;
	font-weight: 700;
	color: #111;
}

/* ---------- footer ---------- */

.tcs-draw__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.75em 1.5em;
	margin-top: 1.5em;
	font-size: 0.92em;
}

.tcs-draw__notes {
	flex: 1 1 60%;
	min-width: 0;
}

.tcs-note {
	margin: 0 0 0.25em;
	line-height: 1.45;
}

.tcs-note__muted {
	color: var(--tcs-muted);
}

.tcs-draw__stand {
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
}

/* ---------- tabs ---------- */

.tcs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 1.25em;
}

.tcs-tabs__btn {
	appearance: none;
	border: 1px solid var(--tcs-title);
	background: transparent;
	color: var(--tcs-title);
	font: inherit;
	font-weight: 600;
	font-size: 0.92em;
	line-height: 1.2;
	padding: 0.55em 1em;
	border-radius: 2em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tcs-tabs__btn:hover,
.tcs-tabs__btn:focus-visible {
	background: rgba(22, 55, 95, 0.08);
}

.tcs-tabs__btn.is-active {
	background: var(--tcs-title);
	color: #fff;
}

.tcs-tabs__panel {
	display: none;
}

.tcs-tabs__panel.is-active {
	display: block;
}

/* ---------- round list (phones) ---------- */

.tcs-rounds {
	display: none;
}

.tcs-rounds__group {
	margin-bottom: 1.5em;
}

.tcs-rounds__label {
	margin: 0 0 0.6em;
	font-size: 1em;
	font-weight: 700;
	color: var(--tcs-title);
	text-transform: none;
	letter-spacing: 0;
}

.tcs-rounds__match {
	border: 1px solid #e2e2e2;
	border-left: 3px solid var(--tcs-title);
	border-radius: 3px;
	padding: 0.6em 0.8em;
	margin-bottom: 0.55em;
	line-height: 1.45;
}

.tcs-rounds__side.is-won {
	font-weight: 700;
}

.tcs-rounds__side.is-lost {
	color: var(--tcs-muted);
}

.tcs-rounds__seed {
	display: inline-block;
	min-width: 1.6em;
	color: var(--tcs-muted);
	font-variant-numeric: tabular-nums;
}

.tcs-rounds__note {
	margin-left: 0.4em;
	font-style: italic;
}

.tcs-rounds__score {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	margin: 0.3em 0;
	padding-left: 1.6em;
}

.tcs-rounds__champion {
	font-weight: 700;
	font-size: 1.1em;
	color: var(--tcs-sub);
}

@media (max-width: 782px) {
	.tcs-draw__scroll {
		display: none;
	}

	.tcs-rounds {
		display: block;
	}

	.tcs-draw {
		padding: 1em 0;
	}

	.tcs-draw__titles {
		padding: 0;
		text-align: left;
	}

	.tcs-draw__logo {
		display: none;
	}

	.tcs-draw__foot {
		margin-top: 0.5em;
	}
}

/* ---------- print ---------- */

@media print {
	.tcs-tabs {
		display: none;
	}

	.tcs-tabs__panel {
		display: block !important;
		page-break-after: always;
	}

	.tcs-rounds {
		display: none !important;
	}

	.tcs-draw__scroll {
		display: block !important;
		overflow: visible;
	}

	.tcs-bracket {
		min-width: 0;
		font-size: 9pt;
	}
}

/* ==================================================================
   Kachel-Darstellung ("button style")
   ------------------------------------------------------------------
   Same geometry as the classic draw – every slot still centres on its
   own midpoint – but the rule under the name becomes a tile, and the
   rules that used to be the draw turn into short connector stubs. */

.tcs-draw--buttons {
	--tcs-tile-bg: #f5f6f8;
	--tcs-tile-border: #dfe3e8;
	--tcs-tile-won: #fff;
	--tcs-conn: #c8ccd2;
	--tcs-gap: 15px;
}

/* the classic rule is replaced by connector stubs */
.tcs-draw--buttons .tcs-slot::after {
	left: auto;
	right: 0;
	width: var(--tcs-gap);
	border-bottom-color: var(--tcs-conn);
}

.tcs-draw--buttons .tcs-slot::before {
	content: "";
	position: absolute;
	left: 0;
	width: var(--tcs-gap);
	top: 50%;
	border-bottom: 1px solid var(--tcs-conn);
}

.tcs-draw--buttons .tcs-bracket__col:first-child .tcs-slot::before,
.tcs-draw--buttons .tcs-bracket__col--winner .tcs-slot::after {
	display: none;
}

.tcs-draw--buttons .tcs-bracket__match::after {
	border-right-color: var(--tcs-conn);
}

.tcs-draw--buttons .tcs-slot {
	padding: 0 var(--tcs-gap);
}

.tcs-draw--buttons .tcs-slot__inner {
	position: absolute;
	left: var(--tcs-gap);
	right: var(--tcs-gap);
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 0.5em 0.7em;
	text-align: left;
	background: var(--tcs-tile-bg);
	border: 1px solid var(--tcs-tile-border);
	border-left: 3px solid var(--tcs-tile-border);
	border-radius: 5px;
	line-height: 1.25;
}

.tcs-draw--buttons .tcs-slot__seed {
	flex: 0 0 auto;
	min-width: 1.4em;
	margin: 0;
	color: #8a9099;
	font-size: 0.85em;
	text-align: right;
}

.tcs-draw--buttons .tcs-slot__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.tcs-draw--buttons .tcs-slot__note {
	flex: 0 0 auto;
	margin: 0;
	color: #8a9099;
	font-size: 0.85em;
	font-style: italic;
	white-space: nowrap;
}

/* Tiles carry their name in the middle of the tile, not above a rule, so the
   line has clear space at the fork and needs no lift. */
.tcs-draw--buttons .tcs-bracket__meta {
	transform: translateY(-50%);
}

.tcs-draw--buttons .tcs-info {
	border-color: var(--tcs-title);
	color: var(--tcs-title);
}

.tcs-draw--buttons .tcs-bracket__result .tcs-set {
	border-color: var(--tcs-title);
	background: var(--tcs-title);
	color: #fff;
}

.tcs-draw--buttons .tcs-bracket__result .tcs-set--text {
	background: #fff;
	color: var(--tcs-title);
}

/* decided matches */
.tcs-draw--buttons .tcs-slot.is-won .tcs-slot__inner {
	background: var(--tcs-tile-won);
	border-color: var(--tcs-tile-border);
	border-left-color: var(--tcs-title);
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.tcs-draw--buttons .tcs-slot.is-lost .tcs-slot__inner {
	background: transparent;
	border-style: dashed;
	border-left-style: dashed;
	color: var(--tcs-muted);
}

.tcs-draw--buttons .tcs-slot.is-lost::after,
.tcs-draw--buttons .tcs-slot.is-lost::before {
	border-bottom-color: var(--tcs-conn);
}

/* nothing decided yet */
.tcs-draw--buttons .tcs-slot.is-empty .tcs-slot__inner {
	background: transparent;
	border-style: dashed;
	border-left-style: dashed;
	border-color: #e4e7eb;
	min-height: 2.4em;
}

/* the champion */
.tcs-draw--buttons .tcs-slot--champion .tcs-slot__inner {
	background: var(--tcs-title);
	border-color: var(--tcs-title);
	border-left-color: var(--tcs-sub);
	color: #fff;
	font-weight: 700;
}

.tcs-draw--buttons .tcs-slot--champion.is-empty .tcs-slot__inner {
	background: transparent;
	border-color: #e4e7eb;
	color: inherit;
}


.tcs-draw--buttons .tcs-slot__trophy {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 0.4em;
}

.tcs-draw--buttons .tcs-slot--champion.is-empty .tcs-slot__trophy {
	display: none;
}

.tcs-draw--buttons .tcs-slot__champion-label {
	color: var(--tcs-sub);
	margin-top: 0.5em;
}

/* the round list picks up the same tile language on phones */
.tcs-rounds__info {
	margin-bottom: 0.35em;
}

.tcs-draw--buttons .tcs-rounds__match {
	border-left-width: 3px;
	border-radius: 5px;
}

@media print {
	.tcs-draw--buttons .tcs-slot__inner {
		box-shadow: none;
	}

	.tcs-draw--buttons .tcs-slot--champion .tcs-slot__inner {
		background: transparent;
		color: inherit;
	}
}

/* ==================================================================
   Fokus auf die laufende Runde
   ------------------------------------------------------------------
   The round currently being played stays at full strength; finished
   and upcoming rounds fade back. Hovering a faded column brings it
   back, so results stay readable when someone goes looking. */

.tcs-bracket__col--past .tcs-bracket__label,
.tcs-bracket__col--past .tcs-bracket__match,
.tcs-bracket__col--future .tcs-bracket__label,
.tcs-bracket__col--future .tcs-bracket__match {
	opacity: var(--tcs-dim, 1);
	transition: opacity 0.18s ease;
}

.tcs-bracket__col--past:hover .tcs-bracket__label,
.tcs-bracket__col--past:hover .tcs-bracket__match,
.tcs-bracket__col--future:hover .tcs-bracket__label,
.tcs-bracket__col--future:hover .tcs-bracket__match,
.tcs-bracket__col--past:focus-within .tcs-bracket__label,
.tcs-bracket__col--past:focus-within .tcs-bracket__match,
.tcs-bracket__col--future:focus-within .tcs-bracket__label,
.tcs-bracket__col--future:focus-within .tcs-bracket__match {
	opacity: 1;
}

/* The champion's route is the one thing a finished draw is read for, so it
   never fades with the round it happens to run through. */
.tcs-draw--path .tcs-bracket__match.is-path {
	opacity: 1;
}

.tcs-bracket__col--active .tcs-bracket__label {
	color: var(--tcs-sub);
}

/* On phones the draw is a scrolling list, so fading would only make
   past results hard to read. Mark the live round instead. */
.tcs-rounds__label {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.tcs-rounds__live {
	flex: 0 0 auto;
	padding: 0.1em 0.55em;
	border-radius: 1em;
	background: var(--tcs-sub);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tcs-rounds__group--future .tcs-rounds__match {
	border-left-color: #d5d8dd;
}

@media print {
	.tcs-bracket__col--past .tcs-bracket__label,
	.tcs-bracket__col--past .tcs-bracket__match,
	.tcs-bracket__col--future .tcs-bracket__label,
	.tcs-bracket__col--future .tcs-bracket__match {
		opacity: 1;
	}
}

/* ==================================================================
   Der Weg des Siegers
   ------------------------------------------------------------------
   One golden line from the Sieger box all the way back to the name
   the champion started under. It is built from the pieces the draw
   already draws: the rule under each of their names, and the half of
   every fork they came up — the top half when they were the upper
   player, the bottom half when they were the lower one. */

.tcs-draw--path .tcs-slot.is-path::after {
	border-bottom-color: var(--tcs-gold);
	border-bottom-width: 3px;
	margin-top: -1px;
	z-index: 1;
}

.tcs-draw--path .tcs-bracket__match.is-path--top::before,
.tcs-draw--path .tcs-bracket__match.is-path--bottom::before {
	content: "";
	position: absolute;
	right: -1px;
	border-right: 3px solid var(--tcs-gold);
	z-index: 1;
}

.tcs-draw--path .tcs-bracket__match.is-path--top::before {
	top: 25%;
	bottom: 50%;
}

.tcs-draw--path .tcs-bracket__match.is-path--bottom::before {
	top: 50%;
	bottom: 25%;
}

.tcs-draw--path .tcs-slot.is-path .tcs-slot__inner {
	font-weight: 700;
}

/* Kacheln: the rule is a pair of stubs and the name sits in a tile, so the
   gold has to run through both stubs and outline the tile it connects. */
.tcs-draw--path.tcs-draw--buttons .tcs-slot.is-path::after,
.tcs-draw--path.tcs-draw--buttons .tcs-slot.is-path::before {
	border-bottom-color: var(--tcs-gold);
	border-bottom-width: 3px;
	margin-top: -1px;
}

.tcs-draw--path.tcs-draw--buttons .tcs-slot.is-path .tcs-slot__inner {
	border-color: var(--tcs-gold);
	border-left-color: var(--tcs-gold);
	background: #fff;
	box-shadow: 0 1px 3px rgba(212, 175, 55, 0.35);
}

.tcs-draw--path.tcs-draw--buttons .tcs-slot--champion.is-path .tcs-slot__inner {
	background: var(--tcs-title);
	color: #fff;
}

/* Phones read the draw as a list, where a fork has no line to colour. The
   champion's matches get the gold down their edge instead. */
.tcs-draw--path .tcs-rounds__match.is-path {
	border-left-color: var(--tcs-gold);
	border-left-width: 5px;
}

/* Turnier-Zeitraum unter dem Untertitel */
.tcs-draw__range {
	margin-top: 0.3em;
	color: #6b7280;
	font-size: clamp(0.82rem, 1.3vw, 1rem);
	font-weight: 500;
}