/* Hover-Zustaende aus dem Design-Export (Inline-Styles koennen keine Pseudo-Klassen) */
.kh-1:hover,.kh-1:focus-visible{color:#16a34a;}
.kh-2:hover,.kh-2:focus-visible{color:#16a34a;}
.kh-3:hover,.kh-3:focus-visible{color:#16a34a;}
.kh-4:hover,.kh-4:focus-visible{color:#16a34a;}
.kh-5:hover,.kh-5:focus-visible{color:#16a34a;}
.kh-6:hover,.kh-6:focus-visible{color:#16a34a;}
.kh-7:hover,.kh-7:focus-visible{color:#16a34a;}
.kh-8:hover,.kh-8:focus-visible{background:#0a7d3c;transform:translateY(-1px);box-shadow:0 6px 26px rgba(22,163,74,.55);}
.kh-9:hover,.kh-9:focus-visible{background:#0a7d3c;transform:translateY(-2px);box-shadow:0 12px 34px rgba(22,163,74,.45);}
.kh-10:hover,.kh-10:focus-visible{border-color:#16a34a;color:#16a34a;}
.kh-11:hover,.kh-11:focus-visible{background:#0a7d3c;transform:translateY(-2px);box-shadow:0 12px 34px rgba(22,163,74,.45);}
.kh-12:hover,.kh-12:focus-visible{border-color:#16a34a;color:#16a34a;}
.kh-13:hover,.kh-13:focus-visible{border-color:#c0c8ce;color:#fff;}
.kh-14:hover,.kh-14:focus-visible{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.6);border-color:#16a34a;}
.kh-15:hover,.kh-15:focus-visible{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.5);border-color:#16a34a;}
.kh-16:hover,.kh-16:focus-visible{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.5);border-color:#16a34a;}
.kh-17:hover,.kh-17:focus-visible{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.5);border-color:#16a34a;}
.kh-18:hover,.kh-18:focus-visible{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.5);border-color:#16a34a;}
.kh-19:hover,.kh-19:focus-visible{box-shadow:0 0 36px rgba(22,163,74,.3);}
.kh-20:hover,.kh-20:focus-visible{background:#0a7d3c;}
.kh-21:hover,.kh-21:focus-visible{box-shadow:0 0 30px rgba(22,163,74,.22);}
.kh-22:hover,.kh-22:focus-visible{background:#0a7d3c;}
.kh-23:hover,.kh-23:focus-visible{box-shadow:0 0 30px rgba(22,163,74,.22);}
.kh-24:hover,.kh-24:focus-visible{background:#0a7d3c;}
.kh-25:hover,.kh-25:focus-visible{box-shadow:0 0 30px rgba(22,163,74,.22);}
.kh-26:hover,.kh-26:focus-visible{background:#0a7d3c;}
.kh-27:hover,.kh-27:focus-visible{transform:scale(1.05);}
.kh-28:hover,.kh-28:focus-visible{transform:scale(1.05);}
.kh-29:hover,.kh-29:focus-visible{transform:scale(1.05);}
.kh-30:hover,.kh-30:focus-visible{transform:scale(1.05);}
.kh-31:hover,.kh-31:focus-visible{transform:scale(1.05);}
.kh-32:hover,.kh-32:focus-visible{transform:scale(1.05);}
.kh-33:hover,.kh-33:focus-visible{transform:scale(1.05);}
.kh-34:hover,.kh-34:focus-visible{background:#0a7d3c;transform:translateY(-2px);box-shadow:0 10px 30px rgba(22,163,74,.45);}
.kh-35:hover,.kh-35:focus-visible{background:#01652e;border-color:#16a34a;}
.kh-36:hover,.kh-36:focus-visible{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.14);}
.kh-37:hover,.kh-37:focus-visible{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.14);}
.kh-38:hover,.kh-38:focus-visible{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.14);}
.kh-39:hover,.kh-39:focus-visible{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.14);}
.kh-40:hover,.kh-40:focus-visible{background:#0a7d3c;transform:translateY(-2px);box-shadow:0 12px 32px rgba(1,101,46,.35);}
.kh-41:hover,.kh-41:focus-visible{background:#0a7d3c;transform:translateY(-2px);box-shadow:0 10px 30px rgba(22,163,74,.45);}
.kh-42:hover,.kh-42:focus-visible{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kh-43:hover,.kh-43:focus-visible{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kh-44:hover,.kh-44:focus-visible{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kh-45:hover,.kh-45:focus-visible{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kh-46:hover,.kh-46:focus-visible{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kh-47:hover,.kh-47:focus-visible{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kh-48:hover,.kh-48:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.35);}
.kh-49:hover,.kh-49:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.35);}
.kh-50:hover,.kh-50:focus-visible{background:#0a7d3c;transform:translateY(-2px);box-shadow:0 12px 32px rgba(22,163,74,.45);}
.kh-51:hover,.kh-51:focus-visible{background:#0a7d3c;transform:translateY(-2px);box-shadow:0 10px 28px rgba(22,163,74,.42);}
.kh-52:hover,.kh-52:focus-visible{border-color:#16a34a;color:#16a34a;}
.kh-53:hover,.kh-53:focus-visible{background:#01652e;border-color:#16a34a;color:#fff;}
.kh-54:hover,.kh-54:focus-visible{background:#01652e;border-color:#16a34a;color:#fff;}
.kh-55:hover,.kh-55:focus-visible{background:#01652e;border-color:#16a34a;color:#fff;}
.kh-56:hover,.kh-56:focus-visible{background:#01652e;border-color:#16a34a;color:#fff;}
.kh-57:hover,.kh-57:focus-visible{color:#16a34a;}
.kh-58:hover,.kh-58:focus-visible{color:#16a34a;}
.kh-59:hover,.kh-59:focus-visible{color:#16a34a;}
.kh-60:hover,.kh-60:focus-visible{color:#16a34a;}
.kh-61:hover,.kh-61:focus-visible{color:#16a34a;}
.kh-62:hover,.kh-62:focus-visible{color:#16a34a;}
.kh-63:hover,.kh-63:focus-visible{color:#16a34a;}
.kh-64:hover,.kh-64:focus-visible{color:#16a34a;}
.kh-65:hover,.kh-65:focus-visible{color:#16a34a;}
.kh-66:hover,.kh-66:focus-visible{color:#16a34a;}
.kh-67:hover,.kh-67:focus-visible{color:#16a34a;}
.kh-68:hover,.kh-68:focus-visible{color:#16a34a;}

/* Fokus-Zustände der Formularfelder (ersetzt die style-focus-Attribute des Exports) */
#knights-form input:focus,
#knights-form select:focus,
#knights-form textarea:focus { border-color: #16a34a !important; }

/* ---------------------------------------------------------------
   Mobil: Die Spielplan-Zeilen kommen aus dem Design mit einem festen
   Vier-Spalten-Raster (66+130+148px plus Abstände = mehr als 375px).
   Auf schmalen Geräten deshalb stapeln statt quetschen.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
	.kn-spielzeile {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		text-align: left !important;
	}

	.kn-spielzeile > * {
		justify-self: start !important;
	}
}

/* Der Fanshop-Streifen läuft absichtlich seitlich aus dem Bild —
   er darf aber die Seite nicht horizontal scrollbar machen. */
@media (max-width: 700px) {
	#fanshop { overflow-x: hidden; }
}

/* Kein horizontales Wackeln auf dem Handy: Die Einblend-Animationen
   schieben Elemente kurzzeitig nach rechts aus dem Bild. */
html { overflow-x: hidden; }

/* (fehlerhafte data-reveal-Regel entfernt) */

/* ---------------------------------------------------------------
   Mobile Navigation
   Das Design bringt sieben Links ohne Handy-Menü mit — gestapelt
   verdecken sie den kompletten Hero. Darum ab 900px ein Burger.
   --------------------------------------------------------------- */
.knights-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: transparent;
	border: 1px solid #2a3a32;
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
}

.knights-burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: #f5f5f5;
	position: relative;
	transition: background .2s ease;
}

.knights-burger span::before,
.knights-burger span::after {
	content: '';
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: #f5f5f5;
	transition: transform .25s ease;
}

.knights-burger span::before { top: -6px; }
.knights-burger span::after  { top: 6px; }

#knav.knights-offen .knights-burger span { background: transparent; }
#knav.knights-offen .knights-burger span::before { transform: translateY(6px) rotate(45deg); }
#knav.knights-offen .knights-burger span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
	.knights-burger { display: inline-flex; }

	#knav { flex-wrap: nowrap !important; gap: 12px !important; }

	#knav > div:not(#knav-prog) {
		display: none !important;
		position: fixed;
		top: 66px;
		left: 0;
		right: 0;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 2px !important;
		padding: 14px 20px 22px !important;
		background: #0b0b0b;
		border-bottom: 1px solid #1f1f1f;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
		max-height: calc(100vh - 66px);
		overflow-y: auto;
	}

	#knav.knights-offen > div:not(#knav-prog) { display: flex !important; }

	#knav > div:not(#knav-prog) > a {
		padding: 14px 2px !important;
		font-size: 15px !important;
		border-bottom: 1px solid #171717;
	}

	#knav > div:not(#knav-prog) > a:last-child {
		margin-top: 10px;
		border-bottom: 0;
		text-align: center;
	}
}

/* ===============================================================
   Mobil-Korrekturen (Stand: Feedback vom Handy)
   =============================================================== */
@media (max-width: 900px) {
	/* Die Navigation nutzt backdrop-filter. Dadurch wird sie zum Bezugsrahmen
	   für position:fixed-Kinder — das Menü sass falsch und liess die
	   halbtransparente Leiste als gruenen Kasten durchscheinen.
	   Absolut unterhalb der Leiste positionieren loest beides. */
	#knav > div:not(#knav-prog) {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		background: #0b0b0b !important;
	}
}

@media (max-width: 700px) {
	/* Matchup: Wappen nebeneinander statt untereinander. */
	.kn-matchup {
		flex-wrap: nowrap !important;
		gap: 10px !important;
		justify-content: space-between !important;
	}

	.kn-matchup > div {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	#gameday img[style*="clamp(104px"] {
		width: 74px !important;
		height: 74px !important;
	}

	/* Team- und Gegnernamen duerfen umbrechen statt zu ueberlaufen. */
	#gameday [style*="clamp(22px"] {
		font-size: 15px !important;
		line-height: 1.15 !important;
		word-break: break-word;
	}

	/* Das "VS" schrumpft mit. */
	#gameday [style*="clamp(40px"] {
		font-size: 26px !important;
		flex: 0 0 auto !important;
	}

	/* Countdown: zwei Kacheln pro Zeile statt vier gequetschte. */
	.kn-countdown {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.kn-countdown > div {
		min-width: 0 !important;
	}

	/* Teams: drei Spalten auf 375px ergeben 97px pro Karte — untereinander. */
	#teams > div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		grid-auto-rows: auto !important;
		gap: 14px !important;
	}

	/* Spielplan: Zeilen als Block, Gegnerfarbe als linke Kante behalten. */
	.kn-spielzeile {
		padding: 16px !important;
		row-gap: 6px !important;
	}

	.kn-spielzeile > *:last-child {
		justify-self: stretch !important;
		width: 100% !important;
		margin-top: 6px;
	}
}

@media (max-width: 420px) {
	#gameday img[style*="clamp(104px"] { width: 62px !important; height: 62px !important; }
}

/* Die Fortschrittsleiste ist Deko in der Navigationsleiste und darf
   von den Menue-Regeln nie erfasst werden. */
#knav-prog {
	position: absolute !important;
	top: auto !important;
	left: 0 !important;
	right: auto !important;
	bottom: 0 !important;
	height: 3px !important;
	background: linear-gradient(90deg, #01652e, #16a34a) !important;
}

/* Ticket-Zeilen: auf schmalen Geraeten sauber stapeln statt umbrechen. */
@media (max-width: 700px) {
	.kn-spieltag {
		display: block !important;
		padding: 18px 16px !important;
	}

	.kn-spieltag > div { min-width: 0 !important; }
	.kn-spieltag > div + div { margin-top: 10px; }
	.kn-spieltag > div:last-child { margin-top: 14px; }
	.kn-spieltag a, .kn-spieltag > div:last-child > span { display: block; text-align: center; }
	.kn-spieltag a { justify-content: center; }
}

@media (max-width: 700px) {
	/* Ticket-Knopf ueber die volle Breite — besseres Ziel auf dem Handy. */
	.kn-spieltag > div:last-child a {
		display: flex !important;
		width: 100% !important;
		justify-content: center !important;
	}
}

/* ===============================================================
   Spielplan auf der Startseite — mobile Neuordnung
   Die Zeile ist ein Raster aus vier festen Spalten
   (66px | 1fr | 130px | 148px). Auf dem Handy quetschen sie sich
   ineinander: Badges landen ueber Wappen und Text.
   Loesung: aus dem Raster ein gestapelter Block werden lassen.
   =============================================================== */
@media (max-width: 760px) {
	.kn-spielzeile {
		display: block !important;
		padding: 16px !important;
		position: relative;
	}

	/* Datum als Zeile oben, nicht als schmale Spalte */
	.kn-spielzeile > div:nth-child(1) {
		display: flex !important;
		align-items: baseline;
		gap: 7px;
		text-align: left !important;
		margin-bottom: 12px;
	}

	.kn-spielzeile > div:nth-child(1) > div:first-child {
		font-size: 26px !important;
	}

	/* Wappen + Namen: volle Breite, Namen duerfen umbrechen */
	.kn-spielzeile > div:nth-child(2) {
		width: 100% !important;
		margin-bottom: 12px;
	}

	/* Badge und Ticket-Knopf nebeneinander in einer Fusszeile */
	.kn-spielzeile > div:nth-child(3),
	.kn-spielzeile > div:nth-child(4) {
		display: inline-block !important;
		vertical-align: middle;
	}

	.kn-spielzeile > div:nth-child(3) {
		margin-right: 10px;
	}

	.kn-spielzeile > div:nth-child(4) a {
		display: inline-flex !important;
	}
}