/**
 * Herbstliga - nur die Bausteine, die das Theme sonst nicht hat.
 *
 * Abschnitte, Ueberschriften, Kennzahlen, Pakete, Termine, Formular und FAQ
 * kommen aus assets/css/main.css. Hier stehen Toepfe, Tabellen, Turnierbaum
 * und die Satz-Eingabe. Geladen wird die Datei nur auf der Liga-Seite.
 */

/* Viele Bausteine setzen display - "hidden" muss trotzdem verstecken. */
[id^="liga-"][hidden],
.pco-liga-sets[hidden] {
	display: none !important;
}

/*
 * Kein Abschnitt darf die Seite verbreitern. Safari auf dem iPhone ueberträgt
 * das "overflow-x: clip" am body nicht auf den Bildschirm: ragt irgendwo etwas
 * hinaus, zoomt es die ganze Seite heraus. Jeder Abschnitt schneidet deshalb
 * selbst ab ("hidden" statt "clip", das kennen auch aeltere iPhones).
 */
section[id^="liga-"] {
	overflow-x: hidden;
}

/* ------------------------------------------------------------------ Einstieg */
.pco-liga-facts {
	margin-top: 64px;
}

.pco-liga-alert {
	padding: 24px var(--pco-gutter) 0;
	background: var(--pco-cream);
}

.pco-liga-alert .pco-form__notice {
	margin: 0;
}

/* --------------------------------------------------------------------- Modus */
.pco-liga-pots {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.pco-liga-pot {
	display: grid;
	gap: 2px;
	min-width: 0;
	overflow: hidden;
	padding: 14px 4px 12px;
	border: 1px solid rgba(249, 232, 214, 0.15);
	border-radius: var(--pco-r-sm);
	background: rgba(249, 232, 214, 0.04);
	text-align: center;
}

.pco-liga-pot__n {
	font: 900 28px/1 var(--pco-display);
	color: var(--pco-gold);
	-webkit-text-stroke: 1px var(--pco-green);
}

.pco-liga-pot__t {
	margin-top: 6px;
	font: 700 11px/1.2 var(--pco-display);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pco-cream);
}

.pco-liga-pot__d {
	font: 400 11px/1.3 var(--pco-body);
	color: rgba(249, 232, 214, 0.6);
}

.pco-liga-draw {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	font: 500 13px/1.3 var(--pco-body);
	color: rgba(249, 232, 214, 0.7);
}

.pco-liga-draw__groups {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pco-liga-draw__groups b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(249, 232, 214, 0.2);
	border-radius: 50%;
	background: rgba(249, 232, 214, 0.1);
	font: 800 12px/1 var(--pco-display);
	color: var(--pco-cream);
}

.pco-liga-rank {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pco-liga-rank li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 12px;
	align-items: baseline;
	font: 400 15px/1.45 var(--pco-body);
	color: rgba(255, 255, 255, 0.85);
}

.pco-liga-rank__n {
	font: 900 24px/1 var(--pco-display);
	color: var(--pco-gold);
	-webkit-text-stroke: 1px var(--pco-green);
}

.pco-liga-rank b {
	color: var(--pco-white);
}

/* ------------------------------------------------------------------ Zeitplan */
.pco-liga-phase .pco-event__day {
	white-space: nowrap;
}

.pco-liga-phase.is-past {
	opacity: 0.55;
}

.pco-liga-phase.is-past:hover {
	opacity: 1;
}

.pco-liga-phase.is-now {
	background: var(--pco-white);
	box-shadow: inset 4px 0 0 var(--pco-gold);
}

.pco-liga-note {
	max-width: 760px;
	margin-top: 40px;
	background: var(--pco-white);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------------------------- Gruppen */
.pco-liga-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 32px;
}

.pco-liga-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font: 500 14px/1.4 var(--pco-body);
	color: rgba(0, 0, 0, 0.6);
}

.pco-liga-legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pco-liga-legend i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pco-gold);
}

.pco-liga-legend i.is-hi {
	background: var(--pco-highlight);
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.pco-liga-mine {
	display: grid;
	gap: 6px;
	min-width: min(100%, 320px);
}

.pco-liga-mine select,
.pco-liga-form select {
	width: 100%;
	min-width: 0;
	padding: 16px 44px 16px 20px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--pco-r-sm);
	background: var(--pco-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230c0e12' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px;
	font: 400 16px/1.3 var(--pco-body);
	color: var(--pco-ink);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s;
}

.pco-liga-mine select:focus,
.pco-liga-form select:focus {
	border-color: var(--pco-ink);
}

.pco-liga-demo {
	margin-top: 20px;
}

.pco-liga-demo:not(:has(> :not([hidden]))) {
	display: none;
}

.pco-liga-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
	gap: 16px;
	margin-top: 24px;
}

.pco-liga-group {
	min-width: 0;
	padding: 28px;
	border-radius: 24px;
	background: var(--pco-cream);
	transition: box-shadow 0.25s;
}

.pco-liga-group.is-mine {
	box-shadow: 0 0 0 2px var(--pco-gold);
}

.pco-liga-group__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.pco-liga-group__head .pco-h3 {
	font-size: 26px;
}

.pco-liga-status {
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--pco-r-pill);
	font: 600 11px/1 var(--pco-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.4);
}

.pco-liga-status.is-done {
	border-color: var(--pco-green);
	background: var(--pco-green);
	color: var(--pco-cream);
}

.pco-liga-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font: 400 15px/1.3 var(--pco-body);
}

.pco-liga-table th,
.pco-liga-table td {
	border: 0;
	background: none;
	color: inherit;
	vertical-align: middle;
}

.pco-liga-table th {
	padding: 0 8px 12px;
	font: 600 11px/1 var(--pco-body);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-align: right;
	white-space: nowrap;
	color: rgba(0, 0, 0, 0.5);
}

.pco-liga-table th:nth-child(2) {
	text-align: left;
}

.pco-liga-table td {
	padding: 12px 8px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pco-liga-table td:nth-child(2) {
	width: 100%;
	text-align: left;
	white-space: normal;
	font-weight: 500;
}

.pco-liga-table td.is-pos {
	width: 30px;
	padding-left: 4px;
	text-align: left;
	font: 900 18px/1 var(--pco-display);
	color: rgba(0, 0, 0, 0.3);
}

.pco-liga-table tr.is-qual td.is-pos {
	color: var(--pco-gold);
	-webkit-text-stroke: 0.6px var(--pco-green);
}

.pco-liga-table tr.is-maybe td.is-pos {
	color: var(--pco-ink);
}

.pco-liga-table tr.is-maybe td.is-pos span {
	margin-left: -5px;
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--pco-highlight);
}

.pco-liga-table td.is-pts {
	font: 700 16px/1 var(--pco-display);
}

.pco-liga-table tr.is-mine td {
	background: rgba(220, 162, 52, 0.14);
}

.pco-liga-ph {
	font-style: italic;
	font-weight: 400 !important;
	color: rgba(0, 0, 0, 0.5);
}

/* Teamliste vor dem ersten Ergebnis */
.pco-liga-teamlist {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.pco-liga-teamlist li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 14px 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.pco-liga-teamlist li.is-mine {
	background: rgba(220, 162, 52, 0.14);
}

.pco-liga-teamlist__n {
	font: 900 24px/1 var(--pco-display);
	color: var(--pco-gold);
	-webkit-text-stroke: 1px var(--pco-green);
}

.pco-liga-teamlist__t {
	font: 700 17px/1.25 var(--pco-display);
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.pco-liga-teamlist__hint {
	margin: 12px 0 0;
	font: 400 13px/1.5 var(--pco-body);
	color: rgba(0, 0, 0, 0.5);
}

/* Spiele unter der Tabelle */
.pco-liga-matches {
	display: grid;
	margin-top: 20px;
}

.pco-liga-match {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 12px 8px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font: 400 15px/1.35 var(--pco-body);
}

.pco-liga-match.is-mine {
	background: rgba(220, 162, 52, 0.14);
}

.pco-liga-match__t {
	min-width: 0;
	color: rgba(0, 0, 0, 0.6);
}

.pco-liga-match__t b {
	font-weight: 600;
	color: var(--pco-ink);
}

.pco-liga-code {
	min-width: 34px;
	padding: 6px 8px;
	border-radius: 8px;
	background: var(--pco-ink);
	font: 800 11px/1 var(--pco-display);
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--pco-gold);
}

.pco-liga-score {
	font: 700 15px/1.2 var(--pco-display);
	letter-spacing: 0.02em;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pco-liga-score small {
	display: block;
	font: 500 11px/1.3 var(--pco-body);
	letter-spacing: 0;
	color: rgba(0, 0, 0, 0.5);
}

.pco-liga-open {
	font: 600 11px/1 var(--pco-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(0, 0, 0, 0.4);
}

.pco-liga-open.is-bad {
	padding: 5px 8px;
	border-radius: 6px;
	background: rgba(220, 162, 52, 0.2);
	color: #8a5f10;
}

.pco-liga-thirds {
	margin-top: 16px;
}

.pco-liga-thirds .pco-liga-group {
	max-width: 720px;
}

.pco-liga-thirds .pco-event__d {
	margin: -6px 0 16px;
}

/* ---------------------------------------------------------------- Turnierbaum */
.pco-liga-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.pco-liga-tabs .pco-btn[aria-selected="false"] {
	border-color: rgba(249, 232, 214, 0.3);
	background: transparent;
	color: var(--pco-cream);
}

.pco-liga-tabs .pco-btn[aria-selected="false"]:hover {
	background: rgba(249, 232, 214, 0.12);
	color: var(--pco-cream);
	transform: none;
}

.pco-liga-swipe {
	display: none;
	margin: -12px 0 20px;
	font: 400 14px/1.5 var(--pco-body);
	color: rgba(249, 232, 214, 0.5);
}

.pco-liga-scroll {
	overflow-x: auto;
	margin-inline: calc(-1 * var(--pco-gutter));
	padding: 0 var(--pco-gutter) 12px;
	scrollbar-width: thin;
	scrollbar-color: rgba(249, 232, 214, 0.3) transparent;
}

.pco-liga-tree {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 20px;
	min-width: min-content;
}

.pco-liga-col {
	display: grid;
	gap: 16px;
	align-content: start;
}

.pco-liga-col__h {
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(249, 232, 214, 0.15);
	font: 700 18px/1.2 var(--pco-display);
	letter-spacing: -0.02em;
}

.pco-liga-col__h small {
	display: block;
	margin-top: 6px;
	font: 600 11px/1 var(--pco-body);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pco-gold);
}

.pco-liga-seg {
	display: grid;
	gap: 10px;
}

.pco-liga-seg__h {
	margin: 6px 0 0;
	font: 600 11px/1 var(--pco-body);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(249, 232, 214, 0.55);
}

.pco-liga-seg__h.is-main {
	color: var(--pco-gold);
}

.pco-liga-mc {
	display: grid;
	gap: 8px;
	padding: 18px 20px;
	border: 1px solid rgba(249, 232, 214, 0.1);
	border-radius: 18px;
	background: rgba(249, 232, 214, 0.06);
}

.pco-liga-mc.is-final {
	border-color: var(--pco-gold);
	background: rgba(220, 162, 52, 0.1);
}

.pco-liga-mc.is-mine {
	box-shadow: 0 0 0 2px var(--pco-gold);
}

.pco-liga-mc__h {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 600 11px/1 var(--pco-body);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(249, 232, 214, 0.55);
}

.pco-liga-mc__h .pco-liga-code {
	background: rgba(249, 232, 214, 0.12);
}

.pco-liga-mc__h .pco-liga-open {
	margin-left: auto;
	color: rgba(249, 232, 214, 0.45);
}

.pco-liga-mc__h .pco-liga-open.is-bad {
	background: rgba(220, 162, 52, 0.15);
	color: var(--pco-gold);
}

.pco-liga-r {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	font: 600 16px/1.3 var(--pco-body);
}

.pco-liga-r__n {
	min-width: 0;
	overflow-wrap: anywhere;
}

.pco-liga-r__n.is-ph {
	font-weight: 400;
	color: rgba(249, 232, 214, 0.5);
}

.pco-liga-r__s {
	font: 700 15px/1 var(--pco-display);
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: rgba(249, 232, 214, 0.7);
}

.pco-liga-r.is-w .pco-liga-r__n,
.pco-liga-r.is-w .pco-liga-r__s {
	color: var(--pco-gold);
}

.pco-liga-r.is-l .pco-liga-r__n,
.pco-liga-r.is-l .pco-liga-r__s {
	font-weight: 500;
	color: rgba(249, 232, 214, 0.5);
}

/* ---------------------------------------------------------- Ergebnis melden */
@media (min-width: 600px) {
	.pco-liga-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Formularzeilen duerfen schmaler werden als ihr Inhalt. */
.pco-liga-form .pco-form__field {
	min-width: 0;
}

/*
 * iOS-Safari zeichnet Datumsfelder in eigener Breite und uebergeht dabei
 * width: 100% - das Feld ragte aus dem Formular und verbreiterte die Seite.
 */
.pco-liga-form input[type="date"] {
	display: block;
	min-width: 0;
	max-width: 100%;
	min-height: 58px;
	-webkit-appearance: none;
	appearance: none;
}

.pco-liga-form input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
}

.pco-liga-form fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pco-liga-form legend {
	margin-bottom: 6px;
	padding: 0;
}

.pco-liga-opts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.pco-liga-opt {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--pco-r-sm);
	background: var(--pco-cream);
	font: 500 15px/1.3 var(--pco-body);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.pco-liga-opt:has(input:checked) {
	border-color: var(--pco-ink);
	background: var(--pco-white);
}

.pco-liga-form .pco-liga-opt input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	accent-color: var(--pco-green);
}

.pco-liga-opt.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pco-liga-sets {
	gap: 10px;
	padding: 18px 20px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--pco-r-sm);
	background: var(--pco-cream);
}

.pco-liga-set,
.pco-liga-vs {
	display: grid;
	grid-template-columns: 70px 1fr 18px 1fr;
	gap: 10px;
	align-items: center;
}

.pco-liga-set span {
	font: 600 11px/1 var(--pco-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
}

.pco-liga-form .pco-liga-set input {
	padding: 14px 0;
	background: var(--pco-white);
	text-align: center;
	font: 700 22px/1 var(--pco-display);
	font-variant-numeric: tabular-nums;
}

.pco-liga-set em {
	font: 700 18px/1 var(--pco-display);
	font-style: normal;
	text-align: center;
	color: rgba(0, 0, 0, 0.4);
}

.pco-liga-vs div {
	font: 700 13px/1.25 var(--pco-display);
	text-align: center;
	overflow-wrap: anywhere;
}

.pco-liga-out {
	display: grid;
	grid-column: 1 / -1;
	gap: 14px;
}

.pco-liga-out pre {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--pco-r-sm);
	background: var(--pco-cream);
	white-space: pre-wrap;
	font: 400 15px/1.55 ui-monospace, Consolas, monospace;
	color: var(--pco-ink);
}

#liga-msg .pco-form__notice {
	margin: 0;
}

.pco-liga-steps {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pco-liga-steps li {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 16px;
	align-items: start;
}

.pco-liga-steps__t {
	display: block;
	margin: 13px 0 6px;
	font: 700 18px/1.2 var(--pco-display);
}

.pco-liga-steps__d {
	display: block;
	font: 400 15px/1.5 var(--pco-body);
	color: rgba(249, 232, 214, 0.7);
}

.pco-liga-steps__note {
	margin: 0;
	font: 400 13px/1.5 var(--pco-body);
	color: rgba(249, 232, 214, 0.5);
}

/* ------------------------------------------------------------------- Regeln */
.pco-liga-rules {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.pco-liga-faq {
	margin-top: 72px;
}

.pco-liga-faq h3 {
	margin: 0;
}

/* --------------------------------------------------------------- Umbrueche */
@media (max-width: 899px) {
	.pco-liga-rules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pco-liga-swipe {
		display: block;
	}
}

@media (max-width: 560px) {
	.pco-liga-rules {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.pco-liga-opts {
		grid-template-columns: 1fr;
	}

	.pco-liga-group {
		padding: 22px 16px;
	}
}