/**
 * SCP Rasenlos – Frontend
 *
 * Doppelte Selektoren (.scp-rasen.scp-rasen) sind Absicht: das Theme setzt
 * in .scp-page einen universellen Reset auf margin/padding, der einfache
 * Klassenselektoren überschreibt.
 */

.scp-rasen.scp-rasen {
	--scp-blue: #1ea8f2;
	--scp-blue-dark: #0d84c7;
	--scp-ink: #07090b;
	--scp-turf: #123a24;
	--scp-turf-alt: #16452b;
	--scp-line: rgba(255, 255, 255, .28);
	--scp-amber: #f0a020;

	font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
	color: var(--scp-ink);
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px 0 32px;
}

/* ==================================================================== */
/* Fix: hidden-Attribut durchsetzen                                      */
/*                                                                       */
/* Das Browser-Standardstylesheet setzt [hidden] { display: none } mit   */
/* minimaler Spezifität. Jede eigene display-Regel (flex, inline-block)  */
/* überschreibt das – dann bleiben ausgeblendete Elemente sichtbar.      */
/* Deshalb hier einmal zentral durchsetzen.                              */
/* ==================================================================== */

.scp-rasen.scp-rasen [hidden] {
	display: none !important;
}

/* --- Kopf ------------------------------------------------------------ */

.scp-rasen .scp-rasen__eyebrow.scp-rasen__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--scp-blue);
	margin: 0 0 8px;
}

.scp-rasen .scp-rasen__title.scp-rasen__title {
	font-family: 'Anton', 'Bebas Neue', 'Barlow Condensed', sans-serif;
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 900;
	text-transform: uppercase;
	line-height: .95;
	letter-spacing: -.01em;
	margin: 0 0 10px;
	color: var(--scp-ink);
}

.scp-rasen .scp-rasen__sub.scp-rasen__sub {
	font-size: 16px;
	line-height: 1.6;
	color: #4a5560;
	margin: 0 0 22px;
	max-width: 56ch;
}

/* --- Fortschritt ----------------------------------------------------- */

.scp-rasen .scp-rasen__bar.scp-rasen__bar {
	height: 10px;
	background: #e6ebef;
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 8px;
}

.scp-rasen .scp-rasen__barfill.scp-rasen__barfill {
	height: 100%;
	background: linear-gradient(90deg, var(--scp-blue-dark), var(--scp-blue));
	border-radius: 999px;
	transition: width .8s cubic-bezier(.22, .9, .28, 1);
}

.scp-rasen .scp-rasen__barlabel.scp-rasen__barlabel {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7784;
	margin: 0 0 20px;
}

/* --- Toolbar --------------------------------------------------------- */

.scp-rasen .scp-rasen__toolbar.scp-rasen__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 12px;
}

.scp-rasen .scp-rasen__legend.scp-rasen__legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.scp-rasen .scp-rasen__key.scp-rasen__key {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b7784;
}

.scp-rasen .scp-rasen__key i {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	display: inline-block;
}

.scp-rasen .scp-rasen__key i.is-frei { background: #2f6b47; }
.scp-rasen .scp-rasen__key i.is-reserviert { background: var(--scp-amber); }
.scp-rasen .scp-rasen__key i.is-verkauft { background: var(--scp-blue); }

.scp-rasen .scp-rasen__zoom.scp-rasen__zoom {
	display: flex;
	gap: 4px;
}

.scp-rasen .scp-rasen__zoom button {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 14px;
	background: #fff;
	color: var(--scp-ink);
	border: 1px solid #d8dfe5;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

.scp-rasen .scp-rasen__zoom button:hover {
	background: var(--scp-blue);
	border-color: var(--scp-blue);
	color: #fff;
}

.scp-rasen .scp-rasen__zoom button:focus-visible {
	outline: 2px solid var(--scp-blue);
	outline-offset: 2px;
}

/* --- Bühne ----------------------------------------------------------- */

.scp-rasen .scp-rasen__stage.scp-rasen__stage {
	position: relative;
	background: var(--scp-ink);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(7, 9, 11, .18);
	touch-action: none;
	cursor: grab;
}

.scp-rasen .scp-rasen__stage.is-dragging { cursor: grabbing; }

.scp-rasen .scp-rasen__svg.scp-rasen__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 104 / 74;
}

.scp-rasen .scp-rasen__loading.scp-rasen__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	background: var(--scp-ink);
}

/* --- Platz ----------------------------------------------------------- */

.scp-rasen .scp-pitch__turf { fill: var(--scp-turf); }
.scp-rasen .scp-pitch__stripe { fill: var(--scp-turf-alt); }
.scp-rasen .scp-pitch__line { fill: var(--scp-line); }
.scp-rasen .scp-pitch__outline,
.scp-rasen .scp-pitch__box,
.scp-rasen .scp-pitch__circle {
	fill: none;
	stroke: var(--scp-line);
	stroke-width: 2;
}
.scp-rasen .scp-pitch__spot { fill: var(--scp-line); }

/* --- Felder ---------------------------------------------------------- */

.scp-rasen .scp-cell {
	stroke: rgba(255, 255, 255, .2);
	stroke-width: .9;
	cursor: pointer;
	transition: fill .18s ease;
}

/* Freie Felder brauchen sichtbare Kanten: solange nichts verkauft ist,
   soll man erkennen, dass der Platz überhaupt in Lose geteilt ist. */
.scp-rasen .scp-cell.is-frei { fill: rgba(255, 255, 255, .05); }
.scp-rasen .scp-cell.is-reserviert { fill: rgba(240, 160, 32, .55); }
.scp-rasen .scp-cell.is-verkauft { fill: rgba(30, 168, 242, .68); }

.scp-rasen .scp-cell:hover { fill: rgba(255, 255, 255, .22); }
.scp-rasen .scp-cell.is-verkauft:hover { fill: rgba(30, 168, 242, .9); }

.scp-rasen .scp-cell.is-aktiv {
	fill: #fff;
	stroke: var(--scp-blue);
	stroke-width: 2;
}

/* --- Tooltip und Detail ---------------------------------------------- */

.scp-rasen .scp-rasen__tip.scp-rasen__tip {
	position: absolute;
	transform: translate(-50%, -140%);
	background: #fff;
	color: var(--scp-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 6px 10px;
	border-radius: 5px;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
	z-index: 3;
}

.scp-rasen .scp-rasen__detail.scp-rasen__detail {
	margin: 14px 0 0;
	padding: 14px 18px;
	background: #f2f6f9;
	border-left: 3px solid var(--scp-blue);
	border-radius: 0 8px 8px 0;
	font-size: 15px;
	font-weight: 600;
}

.scp-rasen .scp-rasen__hint.scp-rasen__hint {
	margin: 12px 0 0;
	font-size: 13px;
	color: #8a949e;
}

/* --- Kompaktvariante -------------------------------------------------- */

.scp-rasen.scp-rasen--kompakt {
	text-align: center;
	padding: 24px 0;
}

.scp-rasen .scp-rasen__bignum.scp-rasen__bignum {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: clamp(48px, 9vw, 84px);
	font-weight: 900;
	line-height: 1;
	color: var(--scp-blue);
}

.scp-rasen .scp-rasen__biglabel.scp-rasen__biglabel {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6b7784;
	margin: 6px 0 16px;
}

/* --- Loskontrolle ----------------------------------------------------- */

.scp-rasen .scp-rasen__label.scp-rasen__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6b7784;
	margin: 0 0 8px;
}

.scp-rasen .scp-rasen__searchrow.scp-rasen__searchrow {
	display: flex;
	gap: 8px;
	max-width: 420px;
}

.scp-rasen .scp-rasen__searchrow input {
	flex: 1;
	font-family: inherit;
	font-size: 16px;
	padding: 11px 14px;
	border: 1px solid #d8dfe5;
	border-radius: 6px;
	background: #fff;
}

.scp-rasen .scp-rasen__searchrow input:focus {
	outline: 2px solid var(--scp-blue);
	outline-offset: 1px;
	border-color: var(--scp-blue);
}

.scp-rasen .scp-rasen__searchrow button {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 11px 22px;
	background: var(--scp-blue);
	color: #fff;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.scp-rasen .scp-rasen__searchrow button:hover { background: var(--scp-blue-dark); }

.scp-rasen .scp-rasen__searchout.scp-rasen__searchout {
	margin: 12px 0 0;
	font-size: 15px;
	color: #37424d;
	min-height: 1.4em;
}

.scp-rasen.scp-rasen--leer {
	padding: 24px;
	background: #f2f6f9;
	border-radius: 10px;
	font-size: 15px;
}

/* --- Mobil ------------------------------------------------------------ */

@media (max-width: 640px) {
	.scp-rasen .scp-rasen__toolbar.scp-rasen__toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
	.scp-rasen .scp-rasen__zoom.scp-rasen__zoom { width: 100%; }
	.scp-rasen .scp-rasen__zoom button { flex: 1; padding: 10px 8px; }
	.scp-rasen .scp-rasen__tip.scp-rasen__tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.scp-rasen .scp-rasen__barfill.scp-rasen__barfill,
	.scp-rasen .scp-cell { transition: none; }
}

/* ==================================================================== */
/* Modul 2: Auswahl und Warenkorb                                        */
/* ==================================================================== */

.scp-rasen .scp-cell.is-gewaehlt {
	fill: #fff;
	stroke: var(--scp-blue);
	stroke-width: 2;
}

.scp-rasen .scp-cell.is-meine {
	fill: rgba(30, 168, 242, .95);
	stroke: #fff;
	stroke-width: 1.6;
}

.scp-rasen .scp-cell.is-konflikt {
	fill: #e0402c;
	stroke: #fff;
	stroke-width: 1.6;
	animation: scp-blink .5s steps(2, end) 5;
}

@keyframes scp-blink {
	50% { opacity: .3; }
}

/* --- Aktionsleiste über dem Warenkorb --------------------------------- */

.scp-rasen .scp-rasen__actions.scp-rasen__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 12px 0 0;
}

.scp-rasen .scp-rasen__lucky.scp-rasen__lucky {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 10px 18px;
	background: transparent;
	color: var(--scp-blue-dark);
	border: 1px solid var(--scp-blue);
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.scp-rasen .scp-rasen__lucky:hover {
	background: var(--scp-blue);
	color: #fff;
}

/* --- Warenkorb --------------------------------------------------------- */

.scp-rasen .scp-rasen__cart.scp-rasen__cart {
	margin: 18px 0 0;
	padding: 20px 22px;
	background: var(--scp-ink);
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(7, 9, 11, .22);
}

.scp-rasen .scp-rasen__cart.is-reserviert {
	background: linear-gradient(135deg, var(--scp-blue-dark), #0a5f8f);
}

.scp-rasen .scp-rasen__cartmain.scp-rasen__cartmain {
	display: flex;
	align-items: center;
	gap: 18px;
}

.scp-rasen .scp-rasen__cartcount.scp-rasen__cartcount {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: 46px;
	font-weight: 900;
	line-height: 1;
	color: var(--scp-blue);
	min-width: 56px;
	text-align: center;
}

.scp-rasen .scp-rasen__cart.is-reserviert .scp-rasen__cartcount { color: #fff; }

.scp-rasen .scp-rasen__cartlabel.scp-rasen__cartlabel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.scp-rasen .scp-rasen__cartsum.scp-rasen__cartsum {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: 26px;
	font-weight: 900;
	line-height: 1.15;
	color: #fff;
}

.scp-rasen .scp-rasen__cartlist.scp-rasen__cartlist {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	margin-top: 3px;
	line-height: 1.5;
}

.scp-rasen .scp-rasen__cartbtns.scp-rasen__cartbtns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.scp-rasen .scp-rasen__btn.scp-rasen__btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background .15s, color .15s, border-color .15s;
}

.scp-rasen .scp-rasen__btn.is-prim {
	background: var(--scp-blue);
	color: #fff;
}

.scp-rasen .scp-rasen__btn.is-prim:hover { background: #fff; color: var(--scp-ink); }
.scp-rasen .scp-rasen__btn.is-prim[disabled] { opacity: .55; cursor: wait; }

.scp-rasen .scp-rasen__btn.is-ghost {
	background: transparent;
	color: rgba(255, 255, 255, .8);
	border-color: rgba(255, 255, 255, .28);
}

.scp-rasen .scp-rasen__btn.is-ghost:hover {
	border-color: #fff;
	color: #fff;
}

.scp-rasen .scp-rasen__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --- Countdown ---------------------------------------------------------- */

.scp-rasen .scp-rasen__timer.scp-rasen__timer {
	margin: 14px 0 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}

.scp-rasen .scp-rasen__timer strong {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: 22px;
	color: #fff;
	margin-left: 6px;
}

.scp-rasen .scp-rasen__timer.is-knapp strong { color: #ffcf4d; }

/* --- Meldungen ---------------------------------------------------------- */

.scp-rasen .scp-rasen__msg.scp-rasen__msg {
	margin: 14px 0 0;
	padding: 11px 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	background: rgba(255, 255, 255, .1);
	border-left: 3px solid rgba(255, 255, 255, .3);
}

.scp-rasen .scp-rasen__msg.is-ok { border-left-color: #4ade80; }
.scp-rasen .scp-rasen__msg.is-warn { border-left-color: var(--scp-amber); }
.scp-rasen .scp-rasen__msg.is-error {
	border-left-color: #e0402c;
	background: rgba(224, 64, 44, .18);
}

@media (max-width: 640px) {
	/* Der Warenkorb schwebt jetzt über der Karte – die alte klebende
	   Variante am Seitenende ist damit überholt. */
	.scp-rasen .scp-rasen__cartcount.scp-rasen__cartcount { font-size: 36px; min-width: 44px; }
	.scp-rasen .scp-rasen__cartbtns .scp-rasen__btn { flex: 1 1 auto; text-align: center; }
	.scp-rasen .scp-rasen__lucky.scp-rasen__lucky { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.scp-rasen .scp-cell.is-konflikt { animation: none; }
}

/* --- Ladefehler --------------------------------------------------------- */

.scp-rasen .scp-rasen__loading.scp-rasen__loading {
	flex-direction: column;
	gap: 14px;
	text-align: center;
	padding: 24px;
}

.scp-rasen .scp-rasen__retry {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 10px 20px;
	background: var(--scp-blue);
	color: #fff;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.scp-rasen .scp-rasen__retry:hover { background: #fff; color: var(--scp-ink); }

/* ==================================================================== */
/* Zoomabhängige Auswahl, Sprungfeld                                     */
/* ==================================================================== */

/* In der Übersicht ist ein Tippen ein Zoom, kein Klick – das zeigt der
   Cursor auch an. */
.scp-rasen .scp-rasen__stage.scp-rasen__stage { cursor: zoom-in; }
.scp-rasen.is-auswahl .scp-rasen__stage.scp-rasen__stage { cursor: grab; }
.scp-rasen .scp-rasen__stage.is-dragging { cursor: grabbing; }

.scp-rasen .scp-cell.is-pop {
	animation: scp-pop .35s ease-out;
}

@keyframes scp-pop {
	0% { stroke-width: 6; opacity: .4; }
	100% { stroke-width: 2; opacity: 1; }
}

.scp-rasen .scp-cell.is-ziel {
	stroke: #ffcf4d;
	stroke-width: 3;
	animation: scp-ziel .6s ease-in-out 3;
}

@keyframes scp-ziel {
	50% { stroke-opacity: .2; }
}

/* --- Sprungfeld --------------------------------------------------------- */

.scp-rasen .scp-rasen__jump.scp-rasen__jump {
	display: flex;
	gap: 8px;
	margin: 0 0 12px;
	max-width: 460px;
}

.scp-rasen .scp-rasen__jump input {
	flex: 1;
	font-family: inherit;
	font-size: 15px;
	padding: 10px 14px;
	border: 1px solid #d8dfe5;
	border-radius: 6px;
	background: #fff;
	min-width: 0;
}

.scp-rasen .scp-rasen__jump input:focus {
	outline: 2px solid var(--scp-blue);
	outline-offset: 1px;
	border-color: var(--scp-blue);
}

.scp-rasen .scp-rasen__jump button {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 10px 20px;
	background: transparent;
	color: var(--scp-blue-dark);
	border: 1px solid var(--scp-blue);
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.scp-rasen .scp-rasen__jump button:hover {
	background: var(--scp-blue);
	color: #fff;
}

@media (max-width: 640px) {
	.scp-rasen .scp-rasen__jump.scp-rasen__jump { max-width: none; }
	.scp-rasen .scp-rasen__jump input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.scp-rasen .scp-cell.is-pop,
	.scp-rasen .scp-cell.is-ziel { animation: none; }
}

/* ==================================================================== */
/* Gewinnplan                                                            */
/* ==================================================================== */

.scp-rasen.scp-rasen--gewinne { padding-bottom: 24px; }

.scp-rasen .scp-gewinne__haupt.scp-gewinne__haupt {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin: 20px 0 0;
}

.scp-rasen .scp-gewinne__karte.scp-gewinne__karte {
	position: relative;
	padding: 26px 22px 22px;
	background: var(--scp-ink);
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(7, 9, 11, .16);
	overflow: hidden;
}

/* Der erste Preis bekommt als einziger die Vereinsfarbe – sonst
   konkurrieren drei gleich laute Karten miteinander. */
.scp-rasen .scp-gewinne__karte:first-child {
	background: linear-gradient(140deg, var(--scp-blue), var(--scp-blue-dark));
}

.scp-rasen .scp-gewinne__rang.scp-gewinne__rang {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: 74px;
	font-weight: 900;
	line-height: .8;
	color: rgba(255, 255, 255, .14);
	position: absolute;
	top: 10px;
	right: 16px;
	pointer-events: none;
}

.scp-rasen .scp-gewinne__titel.scp-gewinne__titel {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: 25px;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.05;
	position: relative;
	z-index: 1;
	padding-right: 46px;
}

.scp-rasen .scp-gewinne__wert.scp-gewinne__wert {
	font-size: 20px;
	font-weight: 700;
	color: var(--scp-blue);
	margin-top: 6px;
}

.scp-rasen .scp-gewinne__karte:first-child .scp-gewinne__wert { color: #fff; }

.scp-rasen .scp-gewinne__sponsor.scp-gewinne__sponsor {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .62);
}

.scp-rasen .scp-gewinne__sponsor strong { color: #fff; font-weight: 700; }

.scp-rasen .scp-gewinne__liste.scp-gewinne__liste {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	border-top: 1px solid #e2e8ee;
}

.scp-rasen .scp-gewinne__liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding: 13px 2px;
	border-bottom: 1px solid #e2e8ee;
}

.scp-rasen .scp-gewinne__anzahl {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: 20px;
	color: var(--scp-blue);
	min-width: 40px;
}

.scp-rasen .scp-gewinne__name {
	font-size: 16px;
	font-weight: 600;
	flex: 1 1 200px;
}

.scp-rasen .scp-gewinne__einzel {
	font-size: 14px;
	color: #7b8590;
}

.scp-rasen .scp-gewinne__summe.scp-gewinne__summe {
	margin: 18px 0 0;
	padding: 14px 18px;
	background: #f2f6f9;
	border-left: 3px solid var(--scp-blue);
	border-radius: 0 8px 8px 0;
	font-size: 14px;
	line-height: 1.6;
	color: #4a5560;
}

@media (max-width: 640px) {
	.scp-rasen .scp-gewinne__rang.scp-gewinne__rang { font-size: 58px; }
	.scp-rasen .scp-gewinne__titel.scp-gewinne__titel { font-size: 22px; }
}

/* ==================================================================== */
/* Usability: Tastatur, Chips, Zähler                                    */
/* ==================================================================== */

/* Sichtbarer Fokus auf der Karte – ohne den ist Tastaturbedienung
   theoretisch vorhanden und praktisch unbrauchbar. */
.scp-rasen .scp-rasen__stage.scp-rasen__stage:focus-visible {
	outline: 3px solid var(--scp-blue);
	outline-offset: 3px;
}

.scp-rasen .scp-cell.has-fokus {
	stroke: #ffcf4d;
	stroke-width: 2.6;
}

.scp-rasen .scp-rasen__keys.scp-rasen__keys {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #9aa4ae;
}

/* Nur einblenden, sobald jemand tatsächlich die Tastatur benutzt. */
.scp-rasen .scp-rasen__keys.scp-rasen__keys { display: none; }
/* Nur bei echter Tastaturbedienung – ein Mausklick fokussiert die Bühne
   ebenfalls, soll den Hinweis aber nicht einblenden. */
.scp-rasen.is-tastatur .scp-rasen__keys.scp-rasen__keys { display: block; }

/* Ansagen für Screenreader, optisch nicht sichtbar. */
.scp-rasen .scp-rasen__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Zähler in der Legende ---------------------------------------------- */

.scp-rasen .scp-rasen__key b {
	font-weight: 700;
	color: #37424d;
	margin-left: 2px;
}

/* --- Warenkorb-Chips ----------------------------------------------------- */

.scp-rasen .scp-rasen__cartlist.scp-rasen__cartlist {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
	max-height: 108px;
	overflow-y: auto;
}

.scp-rasen .scp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .18);
}

.scp-rasen button.scp-chip {
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.scp-rasen button.scp-chip:hover {
	background: rgba(224, 64, 44, .85);
	border-color: rgba(255, 255, 255, .5);
}

.scp-rasen button.scp-chip:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.scp-rasen .scp-chip__x {
	font-size: 15px;
	line-height: 1;
	opacity: .6;
}

.scp-rasen button.scp-chip:hover .scp-chip__x { opacity: 1; }

/* Auf dem Handy ist der Warenkorb angeheftet – die Chipliste darf ihn
   nicht über den halben Bildschirm wachsen lassen. */
@media (max-width: 640px) {
	.scp-rasen .scp-rasen__cartlist.scp-rasen__cartlist { max-height: 72px; }
}

/* ==================================================================== */
/* Zonen, Titel, Mannschaftswertung                                      */
/* ==================================================================== */

.scp-rasen .scp-rasen__zonen.scp-rasen__zonen {
	margin: 16px 0 0;
	padding: 16px 18px;
	background: #f2f6f9;
	border-radius: 10px;
}

.scp-rasen .scp-rasen__zonentitel.scp-rasen__zonentitel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #6b7784;
	margin: 0 0 10px;
}

.scp-rasen .scp-rasen__zonenliste.scp-rasen__zonenliste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 4px 20px;
}

.scp-rasen .scp-zone {
	display: grid;
	grid-template-columns: 12px 1fr 64px 46px;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 7px 4px;
	background: transparent;
	border: 0;
	border-radius: 5px;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .15s;
}

.scp-rasen .scp-zone:hover { background: #e4ecf2; }

.scp-rasen .scp-zone:focus-visible {
	outline: 2px solid var(--scp-blue);
	outline-offset: 1px;
}

.scp-rasen .scp-zone__punkt {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: block;
}

.scp-rasen .scp-zone__name {
	font-size: 15px;
	font-weight: 600;
	color: #2b3540;
}

.scp-rasen .scp-zone__bar {
	display: block;
	height: 6px;
	background: #dae2e9;
	border-radius: 999px;
	overflow: hidden;
}

.scp-rasen .scp-zone__bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--scp-blue);
	border-radius: 999px;
	transition: width .6s cubic-bezier(.22, .9, .28, 1);
}

.scp-rasen .scp-zone__wert {
	font-size: 13px;
	font-weight: 700;
	color: #6b7784;
	text-align: right;
}

.scp-rasen .scp-zone.is-voll .scp-zone__bar i { background: #22c55e; }
.scp-rasen .scp-zone.is-voll .scp-zone__wert {
	color: #15803d;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.scp-rasen .scp-rasen__zonenhint.scp-rasen__zonenhint {
	margin: 10px 0 0;
	font-size: 12px;
	color: #8a949e;
}

/* --- Titel im Warenkorb -------------------------------------------------- */

.scp-rasen .scp-rasen__titel.scp-rasen__titel {
	margin: 14px 0 0;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .1);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}


@media (max-width: 640px) {
	.scp-rasen .scp-rasen__zonenliste.scp-rasen__zonenliste { grid-template-columns: 1fr; }
}

/* ==================================================================== */
/* Schwebender Warenkorb                                                 */
/*                                                                       */
/* Der Warenkorb liegt jetzt über der Karte statt darunter. Beide sind   */
/* Geschwister in der Bühne – so bekommt die Karte keine Zeigerereignisse*/
/* vom Warenkorb ab und das Verschieben bleibt sauber.                   */
/* ==================================================================== */

.scp-rasen .scp-rasen__buehne.scp-rasen__buehne {
	position: relative;
}

.scp-rasen .scp-rasen__cart.scp-rasen__cart {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 12;
	width: 340px;
	max-width: calc(100% - 32px);
	max-height: calc(100% - 32px);
	overflow-y: auto;
	margin: 0;
	padding: 18px 20px;
	background: rgba(7, 9, 11, .94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
	animation: scp-einblenden .22s ease-out;
}

.scp-rasen .scp-rasen__cart.is-reserviert {
	background: linear-gradient(150deg, rgba(13, 132, 199, .96), rgba(10, 95, 143, .96));
	border-color: rgba(255, 255, 255, .22);
}

@keyframes scp-einblenden {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Einklappen ---------------------------------------------------------- */

.scp-rasen .scp-rasen__min.scp-rasen__min {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	font-family: inherit;
	color: rgba(255, 255, 255, .6);
	background: rgba(255, 255, 255, .1);
	border: 0;
	border-radius: 5px;
	cursor: pointer;
}

.scp-rasen .scp-rasen__min:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.scp-rasen .scp-rasen__min:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.scp-rasen .scp-rasen__pille.scp-rasen__pille {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 12;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 13px 20px;
	color: #fff;
	background: var(--scp-blue);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
	animation: scp-einblenden .22s ease-out;
}

.scp-rasen .scp-rasen__pille:hover { background: var(--scp-blue-dark); }
.scp-rasen .scp-rasen__pille:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.scp-rasen .scp-rasen__pille.is-reserviert { background: #f0a020; color: var(--scp-ink); }

/* Der Zählerblock darf nicht unter dem Einklapp-Knopf liegen. */
.scp-rasen .scp-rasen__cart .scp-rasen__cartmain.scp-rasen__cartmain {
	padding-right: 34px;
}

.scp-rasen .scp-rasen__cart .scp-rasen__cartcount.scp-rasen__cartcount {
	font-size: 38px;
	min-width: 46px;
}

.scp-rasen .scp-rasen__cart .scp-rasen__cartsum.scp-rasen__cartsum { font-size: 22px; }

/* --- Mobil: als Leiste am unteren Rand der Karte ------------------------- */

@media (max-width: 760px) {
	/* Am Handy ist die Karte nur rund 270 px hoch – ein Panel darüber würde
	   sie komplett verdecken. Deshalb hier keine Auflage, sondern eine
	   Leiste am unteren Bildschirmrand: immer sichtbar, ohne die Karte
	   zuzudecken. */
	.scp-rasen .scp-rasen__cart.scp-rasen__cart {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: 8px;
		width: auto;
		max-width: none;
		max-height: 48vh;
		padding: 12px 14px;
		border-radius: 14px;
	}

	.scp-rasen .scp-rasen__pille.scp-rasen__pille {
		position: fixed;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		bottom: 12px;
	}

	/* Auf der Leiste zählt nur das Nötigste. Die Titel sind Beiwerk, und
	   Felder entfernt man über die Chips statt über einen eigenen Knopf. */
	.scp-rasen .scp-rasen__cart .scp-rasen__titel.scp-rasen__titel { display: none; }
	.scp-rasen .scp-rasen__cart .scp-rasen__btn.is-ghost[data-scp-clear] { display: none; }

	.scp-rasen .scp-rasen__cart .scp-rasen__cartlist.scp-rasen__cartlist {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		max-height: none;
		padding-bottom: 2px;
	}

	.scp-rasen .scp-rasen__cart .scp-chip { flex: 0 0 auto; }

	.scp-rasen .scp-rasen__cart .scp-rasen__cartcount.scp-rasen__cartcount {
		font-size: 30px;
		min-width: 38px;
	}

	.scp-rasen .scp-rasen__cart .scp-rasen__cartlist.scp-rasen__cartlist { max-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
	.scp-rasen .scp-rasen__cart.scp-rasen__cart,
	.scp-rasen .scp-rasen__pille.scp-rasen__pille { animation: none; }
}

/* --- Feinschliff des schwebenden Warenkorbs ----------------------------- */

.scp-rasen .scp-rasen__cart.scp-rasen__cart { width: 372px; }

/* Der Zähler soll oben stehen, nicht neben einer wachsenden Chipliste
   in der Mitte schweben. */
.scp-rasen .scp-rasen__cart .scp-rasen__cartmain.scp-rasen__cartmain {
	align-items: flex-start;
	gap: 14px;
}

.scp-rasen .scp-rasen__cart .scp-rasen__cartmeta.scp-rasen__cartmeta {
	min-width: 0;
	flex: 1;
}

.scp-rasen .scp-rasen__cart .scp-rasen__cartcount.scp-rasen__cartcount {
	line-height: .85;
	margin-top: 2px;
}

/* Kompaktere Chips, damit zwei nebeneinander passen. */
.scp-rasen .scp-rasen__cart .scp-chip {
	font-size: 12px;
	padding: 6px 9px;
	gap: 5px;
}

.scp-rasen .scp-rasen__cart .scp-rasen__titel.scp-rasen__titel {
	font-size: 13px;
	padding: 9px 12px;
}

/* --- Mobil: mehr Karte, kompakterer Warenkorb --------------------------- */

@media (max-width: 760px) {
	.scp-rasen .scp-rasen__cart.scp-rasen__cart {
		max-height: 54%;
		padding: 12px 14px;
	}

	.scp-rasen .scp-rasen__cart .scp-rasen__cartmain.scp-rasen__cartmain {
		gap: 10px;
	}

	.scp-rasen .scp-rasen__cart .scp-rasen__cartsum.scp-rasen__cartsum {
		font-size: 19px;
	}

	.scp-rasen .scp-rasen__cart .scp-rasen__cartlist.scp-rasen__cartlist {
		max-height: 44px;
		margin-top: 7px;
	}

	.scp-rasen .scp-rasen__cart .scp-rasen__titel.scp-rasen__titel {
		font-size: 12px;
		padding: 7px 10px;
		margin-top: 10px;
	}

		.scp-rasen .scp-rasen__cart .scp-rasen__cartbtns.scp-rasen__cartbtns { margin-top: 10px; gap: 6px; }
	.scp-rasen .scp-rasen__cart .scp-rasen__btn.scp-rasen__btn { padding: 10px 14px; font-size: 13px; }
}

/* Im schmalen Panel passen die Knöpfe nicht nebeneinander. Gestapelt –
   und die Hauptaktion gehört nach oben, nicht unter „Auswahl leeren“. */
.scp-rasen .scp-rasen__cart .scp-rasen__cartbtns.scp-rasen__cartbtns {
	flex-direction: column;
}

.scp-rasen .scp-rasen__cart .scp-rasen__btn.is-prim { order: -1; }

/* --- Altersbestätigung und Rechtstexte ---------------------------------- */

.scp-rasen .scp-rasen__zustimmung.scp-rasen__zustimmung {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
}

.scp-rasen .scp-rasen__zustimmung input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	accent-color: var(--scp-blue);
}

.scp-rasen .scp-rasen__zustimmung a { color: #fff; text-decoration: underline; }

.scp-rasen.scp-rasen--recht {
	font-size: 16px;
	line-height: 1.7;
	color: #37424d;
	max-width: 70ch;
}

.scp-rasen.scp-rasen--recht p { margin: 0 0 14px; }
.scp-rasen.scp-rasen--recht strong { color: var(--scp-ink); }
.scp-rasen.scp-rasen--recht em { color: #8a949e; font-size: 14px; }

/* ==================================================================== */
/* Intro                                                                 */
/* ==================================================================== */

.scp-rasen.scp-rasen--intro { padding-bottom: 8px; }

.scp-rasen .scp-intro__titel.scp-intro__titel {
	font-family: 'Anton', 'Bebas Neue', 'Barlow Condensed', sans-serif;
	font-size: clamp(38px, 7vw, 68px);
	font-weight: 900;
	text-transform: uppercase;
	line-height: .93;
	letter-spacing: -.015em;
	margin: 0 0 16px;
	color: var(--scp-ink);
}

.scp-rasen .scp-intro__lead.scp-intro__lead {
	font-size: 19px;
	line-height: 1.6;
	color: #4a5560;
	max-width: 62ch;
	margin: 0 0 28px;
}

.scp-rasen .scp-intro__lead strong { color: var(--scp-ink); }

/* --- Die vier Kennzahlen ------------------------------------------------ */

.scp-rasen .scp-intro__zahlen.scp-intro__zahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px;
	background: #dde4ea;
	border-radius: 12px;
	overflow: hidden;
	margin: 0 0 12px;
}

.scp-rasen .scp-intro__zahl {
	background: #fff;
	padding: 22px 18px;
	text-align: center;
}

.scp-rasen .scp-intro__zahl.is-chance { background: var(--scp-ink); }

.scp-rasen .scp-intro__wert {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 900;
	line-height: 1;
	color: var(--scp-blue-dark);
	white-space: nowrap;
}

.scp-rasen .scp-intro__zahl.is-chance .scp-intro__wert { color: #fff; }

.scp-rasen .scp-intro__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7b8590;
	margin-top: 7px;
}

.scp-rasen .scp-intro__zahl.is-chance .scp-intro__label { color: rgba(255, 255, 255, .6); }

.scp-rasen .scp-intro__chance.scp-intro__chance {
	font-size: 14px;
	color: #7b8590;
	margin: 0 0 30px;
}

/* --- Drei Schritte ------------------------------------------------------ */

.scp-rasen .scp-intro__schritte.scp-intro__schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
	margin: 0 0 30px;
}

.scp-rasen .scp-intro__schritt h3 {
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: 21px;
	font-weight: 900;
	text-transform: uppercase;
	margin: 10px 0 6px;
	color: var(--scp-ink);
}

.scp-rasen .scp-intro__schritt p {
	font-size: 15px;
	line-height: 1.6;
	color: #6b7784;
	margin: 0;
}

.scp-rasen .scp-intro__nr {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--scp-blue);
	color: #fff;
	font-family: 'Anton', 'Bebas Neue', sans-serif;
	font-size: 19px;
	line-height: 36px;
	text-align: center;
}

/* --- Handlungsaufforderung ---------------------------------------------- */

.scp-rasen .scp-intro__aktion.scp-intro__aktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 22px 0 0;
	border-top: 1px solid #e2e8ee;
}

.scp-rasen .scp-intro__cta.scp-intro__cta {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 16px 34px;
	background: var(--scp-blue);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(30, 168, 242, .3);
	transition: background .15s, transform .15s;
}

.scp-rasen .scp-intro__cta:hover {
	background: var(--scp-blue-dark);
	transform: translateY(-1px);
	color: #fff;
}

.scp-rasen .scp-intro__stand.scp-intro__stand {
	font-size: 15px;
	line-height: 1.5;
	color: #6b7784;
}

.scp-rasen .scp-intro__stand strong { color: var(--scp-ink); font-size: 18px; }
.scp-rasen .scp-intro__stand span { font-size: 13px; color: #9aa4ae; }

@media (max-width: 640px) {
	.scp-rasen .scp-intro__zahlen.scp-intro__zahlen { grid-template-columns: 1fr 1fr; }
	.scp-rasen .scp-intro__cta.scp-intro__cta { width: 100%; text-align: center; }
	.scp-rasen .scp-intro__schritte.scp-intro__schritte { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.scp-rasen .scp-intro__cta:hover { transform: none; }
}