/* ============================================================
   /spiel – Einstiegsseite im Rahmen der Website.
   Bewusst zurückhaltend: Das Theme gibt den Rahmen vor, dieses
   Blatt gestaltet nur den eigenen Bereich.
   ============================================================ */

.gd-start-wrap {
	font-family: var(--gd-font);
	color: var(--gd-ink);
	max-width: 900px;
	margin: 0 auto 28px;
}
.gd-start-wrap *, .gd-start-wrap *::before, .gd-start-wrap *::after { box-sizing: border-box; }

.gd-hero {
	text-align: center;
	padding: 30px 20px 34px;
	border: 1px solid var(--gd-line);
	border-radius: 22px;
	background: linear-gradient(165deg, var(--gd-teal-tint) 0%, #fff 56%);
	margin-bottom: 26px;
}
.gd-hero__kicker {
	font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--gd-teal); margin: 0 0 10px;
}
.gd-hero__title {
	font-size: clamp(32px, 7vw, 54px); font-weight: 900; line-height: 1.02;
	letter-spacing: -.02em; margin: 0 0 10px; color: var(--gd-ink);
}
.gd-hero__claim { font-size: clamp(16px, 2.6vw, 20px); color: var(--gd-muted); margin: 0 0 18px; }
.gd-hero__messe {
	display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--gd-teal-dark);
	background: #fff; border: 1px solid var(--gd-line); border-radius: 999px;
	padding: 7px 16px; margin: 0 0 20px;
}
.gd-hero__badge {
	margin-left: 6px; padding: 2px 8px; border-radius: 999px;
	background: var(--gd-teal); color: #fff; font-size: 11px;
}
.gd-hero__cta { margin: 0 0 14px; }
.gd-hero__btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--gd-tap); min-width: min(320px, 90%);
	padding: 16px 32px; border-radius: 16px;
	background: var(--gd-teal); color: #fff !important;
	font-size: 20px; font-weight: 800; text-decoration: none !important;
	transition: background var(--gd-anim) ease, transform 120ms ease;
}
.gd-hero__btn:hover, .gd-hero__btn:focus-visible { background: var(--gd-teal-dark); transform: translateY(-1px); }
.gd-hero__sub { font-size: 14px; color: var(--gd-muted); margin: 0 auto; max-width: 46ch; }

.gd-hero__cards {
	display: flex; align-items: stretch; justify-content: center; gap: 12px;
	margin-top: 26px; flex-wrap: wrap;
}
.gd-hero__card {
	flex: 0 1 190px; display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: #fff; border: 1px solid var(--gd-line); border-radius: 18px; padding: 16px 12px;
}
.gd-hero__card--frage { border-style: dashed; }
.gd-hero__icon { width: 44px; height: 44px; color: var(--gd-teal); }
.gd-hero__cardtitel { font-size: 14px; font-weight: 700; }
.gd-hero__zahl {
	font-size: 26px; font-weight: 900; color: var(--gd-teal-dark);
	font-variant-numeric: tabular-nums;
}
.gd-hero__vs {
	align-self: center; font-size: 12px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--gd-muted);
}

.gd-infos { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 22px; }
@media (min-width: 720px) { .gd-infos { grid-template-columns: repeat(3, 1fr); } }

.gd-info {
	border: 1px solid var(--gd-line); border-radius: 16px; padding: 18px; background: #fff;
}
.gd-info h2 {
	font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--gd-teal-dark); margin: 0 0 12px;
}
.gd-info ul {
	/* Das Theme nimmt Listen die Punkte – hier sind sie Teil der Erklaerung. */
	margin: 0; padding: 0 0 0 18px; list-style: disc outside;
	font-size: 14.5px; line-height: 1.55; color: var(--gd-muted);
}
.gd-info ul li { margin-bottom: 4px; }
.gd-info .gd-raenge, .gd-info .gd-messeliste { list-style: none; padding: 0; display: grid; gap: 7px; }
.gd-raenge li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.gd-raenge__serie {
	font-variant-numeric: tabular-nums; font-weight: 800; color: var(--gd-ink);
	min-width: 56px;
}
.gd-raenge__name { color: var(--gd-muted); text-align: right; }
.gd-messeliste li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.gd-messeliste a { font-weight: 700; color: var(--gd-teal-dark); }
.gd-messeliste__datum { font-size: 12.5px; color: var(--gd-muted); white-space: nowrap; }

.gd-hinweis {
	font-size: 13.5px; line-height: 1.55; color: var(--gd-muted);
	background: var(--gd-surface); border-left: 4px solid var(--gd-ok);
	border-radius: 0 12px 12px 0; padding: 14px 16px; margin: 0 0 14px;
}
.gd-hinweis--klein { font-size: 12.5px; border-left-color: var(--gd-line); }