/* =========================================================================
   GAH574 — Event-Landingpage
   Eine Quelle der Wahrheit fuer die gesamte Optik (Leitfaden §9).
   Keine Inline-Styles im gerenderten HTML.

   Aufbau
     1  Tokens
     2  Basis und Bricks-Neutralisierung
     3  Layout: Rahmen, Panels, Inhaltsspalte
     4  Bausteine: Eyebrow, Pfeil, Pills, Links, Platzhalter
     5  Sektionen
     6  Bold-Tickets-Formular
     7  Bewegung und Fokus
   ========================================================================= */

/* -------------------------------------------------------------------------
   1  Tokens
   ---------------------------------------------------------------------- */

.gah-page {
	/* Farbe — nur zwei echte Farben tragen die Seite (Handoff).
	   BARRIEREFREIHEIT: #327EDB ergibt gegen Weiss 4,08:1 und liegt damit
	   unter den 4,5:1 der WCAG AA fuer normalen Text. Betroffen ist alles
	   unter 24px: Fliesstext, Eyebrows, Navigation, CTA- und FAQ-Beschriftung,
	   Partner-Label. Ueberschriften ab 24px sind mit 3:1 in Ordnung.
	   Ein Tausch auf #2676D7 (Helligkeit -6 %) erreicht 4,51:1 bei nahezu
	   gleicher Anmutung. Die Entscheidung liegt bei clot.design — bis dahin
	   bleibt der Entwurfswert stehen. Gemessen mit pruefung/kontrast.js. */
	--gah-blau: #327edb;
	/* Freigegebene Alternative, wenn clot.design zustimmt: #2676D7 */
	--gah-blau-rgb: 50, 126, 219;
	--gah-weiss: #ffffff;
	--gah-blau-22: rgba(50, 126, 219, 0.22);
	--gah-weiss-15: rgba(255, 255, 255, 0.15);
	--gah-grau-platzhalter: #d9d9d9;
	--gah-partner-grund: #f4f6f9;
	--gah-partner-slot: #e2e6ec;
	--gah-partner-schrift: #929caa;
	/* Hover-Ton aus dem Handoff — steht laut clot.design noch unter Vorbehalt */
	--gah-dunkel: #14293f;
	--gah-schatten-select: 0 4px 8px rgba(0, 0, 0, 0.06);

	/* Schrift */
	--gah-schrift: "TT Firs Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--gah-schrift-display: "Helvetica Now Display", "TT Firs Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Schriftgroessen — fluid, Zielwert ist der Figma-Wert bei 1512px.
	   Bewusst in px: Bricks setzt html auf 62,5 %, damit waere 1rem = 10px
	   und jede rem-Angabe um 37,5 % zu klein (gemessen, §12.1). */
	--gah-h1: clamp(44px, 5.3vw, 80px);
	--gah-h2: clamp(32px, 3.6vw, 54px);
	--gah-h2-display: clamp(30px, 3vw, 45px);
	--gah-h3-display: clamp(24px, 2.4vw, 36px);
	--gah-countdown: clamp(28px, 3vw, 45px);
	--gah-label: clamp(20px, 1.85vw, 28px);
	--gah-gross: clamp(17px, 1.32vw, 20px);
	--gah-basis: 16px;
	--gah-klein: 13px;

	/* Radien */
	--gah-radius-select: 8px;
	--gah-radius-panel: 18px;
	--gah-radius-bild: 20px;
	--gah-radius-pill: 100px;

	/* Raster */
	--gah-rahmen-max: 1512px;
	--gah-inhalt-max: 1232px;
	--gah-gutter: clamp(24px, 9.26vw, 140px); /* 140px bei 1512px */
	--gah-panel-inset: clamp(12px, 1.46vw, 22px);
	--gah-spalten-abstand: clamp(24px, 3.2vw, 48px);
	--gah-text-abstand: 18px;
	--gah-tick-abstand: 12px;
	--gah-tick-breite: 5px;

	/* Vertikale Rhythmik — im Figma handgesetzt, hier je Sektion gemessen */
	--gah-py-s: clamp(28px, 3.5vw, 52px);
	--gah-py-m: clamp(48px, 8.2vw, 124px);
	--gah-py-l: clamp(64px, 10.7vw, 162px);
	--gah-py-xl: clamp(80px, 16.2vw, 245px);
}

/* -------------------------------------------------------------------------
   2  Basis und Bricks-Neutralisierung
   ---------------------------------------------------------------------- */

/* Bricks vererbt global line-height 1.7, Ueberschriften zusaetzlich 1.4.
   Die Design-Datei setzt keine -> normal. Ohne das ist jeder Block zu hoch (§9.2). */
.gah-page,
.gah-page :where(h1, h2, h3, h4, h5, h6) {
	line-height: normal;
}

.gah-page {
	font-family: var(--gah-schrift);
	font-size: var(--gah-basis);
	font-weight: 400;
	color: var(--gah-blau);
	background: var(--gah-weiss);
	-webkit-font-smoothing: antialiased;
}

.gah-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd) {
	margin: 0;
}

.gah-page :where(ul, ol) {
	padding: 0;
	list-style: none;
}

/* Bricks stylt generische Tags per Element-Selektor (§4.3). */
.gah-page blockquote {
	margin: 0;
	padding-left: 0;
	border-left: 0;
	font-family: inherit;
	font-size: inherit;
}

.gah-page blockquote cite {
	font-family: inherit;
	text-transform: none;
	opacity: 1;
}

.gah-page figcaption {
	text-align: left;
}

/* Bricks faerbt <label> grau (gemessen rgb(158,158,158)) — zuruecksetzen (§4.3). */
.gah-page :where(label, legend) {
	color: inherit;
}

.gah-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

.gah-page a {
	color: inherit;
}

/* -------------------------------------------------------------------------
   3  Layout
   ---------------------------------------------------------------------- */

/* Bricks' section/container/block sind Flex-Spalten mit align-items:center.
   Ein max-width-Wrapper darin schrumpft sonst auf Inhaltsbreite (§4.1). */
.gah-inner {
	display: block;
	width: 100%;
	max-width: var(--gah-inhalt-max);
	margin-inline: auto;
	padding-inline: 0;
}

/* Sektionen, die ihre Breite selbst regeln (Hero, Partnerleiste). */
.gah-inner--voll {
	max-width: none;
}

/* Die Sektion traegt den Aussenabstand, die Panels ihren Grund. */
.gah-sec {
	display: block;
	width: 100%;
	padding-block: var(--gah-py-l);
	padding-inline: var(--gah-gutter);
}

/* Blaue Panels: 22px vom Rahmenrand eingerueckt, 18px Radius. */
.gah-sec--panel {
	margin-inline: var(--gah-panel-inset);
	width: auto;
	border-radius: var(--gah-radius-panel);
	background: var(--gah-blau);
	color: var(--gah-weiss);
	/* Der Gutter misst ab Rahmenkante, das Panel beginnt aber eingerueckt. */
	padding-inline: calc(var(--gah-gutter) - var(--gah-panel-inset));
}

/* Panels stossen mit 22px aneinander. */
.gah-sec--panel + .gah-sec--panel {
	margin-top: var(--gah-panel-inset);
}

/* Hero und Kontakt stehen im Figma 32px weiter rechts als die uebrigen
   sieben Sektionen. Uebernommen, aber als Rueckfrage an clot.design notiert. */
.gah-sec--versatz .gah-inner {
	padding-left: 32px;
}

/* Gemessene Innenabstaende je Sektion (§12) */
.gah-sec--hero { padding-block: var(--gah-py-s) var(--gah-py-m); }
.gah-sec--partner { padding-block: 0; }
.gah-sec--einordnung { padding-block: var(--gah-py-m) var(--gah-py-l); }
.gah-sec--programm { padding-block: var(--gah-py-l) var(--gah-py-s); }
.gah-sec--referent { padding-block: var(--gah-py-l) var(--gah-py-xl); }
.gah-sec--tickets { padding-block: var(--gah-py-l); }
.gah-sec--anfahrt { padding-block: var(--gah-py-xl); }
.gah-sec--faq { padding-block: var(--gah-py-m) var(--gah-py-xl); }
.gah-sec--kontakt { padding-block: var(--gah-py-xl); }
.gah-sec--footer { padding-block: clamp(24px, 2.3vw, 35px) clamp(20px, 1.8vw, 27px); }

/* Anker duerfen nicht unter dem Sticky-Header verschwinden (§4.6). */
.gah-page [id] {
	scroll-margin-top: clamp(72px, 8vw, 120px);
}

/* Zweispaltiges Grundraster: Ueberschrift links, Text rechts.
   Nicht 1fr/1fr: im Entwurf beginnt die rechte Spalte durchgehend bei
   x 740 und ist 632px breit — gemessen an Einordnung, Programm und
   Tickets. Mit gleichen Haelften plus Abstand saesse sie bei 780. */
.gah-zweispaltig {
	display: grid;
	grid-template-columns: minmax(0, 600fr) minmax(0, 632fr);
	column-gap: 0;
	row-gap: var(--gah-spalten-abstand);
	align-items: start;
}

/* -------------------------------------------------------------------------
   4  Bausteine
   ---------------------------------------------------------------------- */

.gah-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--gah-tick-abstand);
	margin-bottom: var(--gah-text-abstand);
	font-size: var(--gah-basis);
	font-weight: 400;
	line-height: 1;
}

.gah-eyebrow__strich {
	flex: 0 0 auto;
	width: var(--gah-tick-breite);
	height: 16px;
	background: currentColor;
}

.gah-titel {
	font-family: var(--gah-schrift);
	font-size: var(--gah-h2);
	font-weight: 500;
	line-height: 1.1;
	max-width: 20ch;
}

.gah-titel--h1 {
	font-size: var(--gah-h1);
	line-height: 1;
	max-width: 632px;
}

.gah-titel--display {
	font-family: var(--gah-schrift-display);
	font-size: var(--gah-h2-display);
	font-weight: 400;
	line-height: 1.2;
}

.gah-text {
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-text + .gah-text {
	margin-top: 1.2em;
}

.gah-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gah-pfeil {
	flex: 0 0 auto;
	font-family: var(--gah-schrift-display);
	line-height: 1;
}

/* Pills ------------------------------------------------------------------ */

.gah-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--gah-radius-pill);
	font-size: var(--gah-basis);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

/* Gefuellt: weisse Flaeche, blaue Schrift.
   Die Root-Klasse steht davor, weil .gah-page a (0,1,1) sonst die
   Textfarbe der Umgebung durchreicht und die Beschriftung weiss auf
   weiss verschwindet (§4.6). */
.gah-page .gah-pill--voll {
	min-height: 44px;
	height: 44px;
	padding: 14px 24px;
	border: 1px solid var(--gah-weiss);
	background: var(--gah-weiss);
	color: var(--gah-blau);
	font-family: var(--gah-schrift-display);
	font-weight: 400;
}

/* Umrandet, gross: 294x60 mit Kreis-Pfeil rechts */
.gah-pill--kontur {
	position: relative;
	min-height: 60px;
	min-width: 294px;
	padding: 18px 60px 18px 27px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: var(--gah-gross);
	justify-content: flex-start;
}

.gah-pill--kontur .gah-pill__kreis {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	background: var(--gah-weiss);
	color: var(--gah-blau);
	font-family: var(--gah-schrift-display);
	font-size: var(--gah-gross);
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

/* Hover: laut Handoff Vorschlag, Abnahme durch clot.design steht aus.
   Buttons sind <a> — generischer Link-Hover schlaegt sonst durch (§4.6). */
.gah-page .gah-pill--voll:hover,
.gah-page .gah-pill--voll:focus-visible {
	background: var(--gah-weiss);
	color: var(--gah-dunkel);
}

.gah-page .gah-pill--kontur:hover,
.gah-page .gah-pill--kontur:focus-visible {
	background: var(--gah-weiss);
	color: var(--gah-blau);
}

.gah-page .gah-pill--kontur:hover .gah-pill__kreis,
.gah-page .gah-pill--kontur:focus-visible .gah-pill__kreis {
	background: var(--gah-blau);
	color: var(--gah-weiss);
}

/* Platzhalter fuer noch nicht gelieferte Inhalte — sichtbar, nicht still (§13) */
.gah-platzhalter {
	display: block;
	padding: 12px 16px;
	border: 1px dashed currentColor;
	border-radius: var(--gah-radius-select);
	font-size: var(--gah-basis);
	line-height: 1.3;
	opacity: 0.75;
}

.gah-bild-platzhalter {
	display: grid;
	place-items: center;
	width: 100%;
	border: 1px dashed currentColor;
	border-radius: var(--gah-radius-bild);
	background: var(--gah-grau-platzhalter);
	color: var(--gah-dunkel);
	font-size: var(--gah-basis);
	text-align: center;
	padding: 16px;
}

.gah-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   5  Sektionen
   ---------------------------------------------------------------------- */

/* 5.1  Header ------------------------------------------------------------ */

/* Im Figma sitzt die Kopfzeile IM Hero-Panel, nicht als eigene Leiste.
   Deshalb liegt sie absolut ueber der ersten Sektion; jede Seite beginnt
   mit einem blauen Panel. Nicht sticky — das Design zeigt keine. */
.gah-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 20;
	padding-top: clamp(24px, 3.4vw, 52px);
	color: var(--gah-weiss);
}

.gah-header__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 2.6vw, 40px);
	padding-inline: calc(var(--gah-gutter) + 32px) var(--gah-gutter);
}

.gah-header__marke {
	display: inline-flex;
	flex: 0 0 auto;
	text-decoration: none;
}

/* Bricks-Block hat width:100% als Default — Inhaltsbreite zuruecksetzen (§2.1) */
.gah-header__rechts {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(16px, 2.1vw, 32px);
	width: auto;
}

.gah-header__nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(16px, 2.1vw, 32px);
	width: auto;
}

.gah-header__nav a {
	font-size: var(--gah-basis);
	line-height: 1;
	text-decoration: none;
}

.gah-header__nav a:hover,
.gah-header__nav a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gah-logo {
	display: block;
	color: currentColor;
}

.gah-logo__svg {
	display: block;
	width: clamp(180px, 21.6vw, 326.7px);
	height: auto;
}

.gah-logo--klein .gah-logo__svg {
	width: clamp(160px, 18vw, 272px);
}

/* 5.2  Hero -------------------------------------------------------------- */

/* Das Motiv laeuft bis an die Panelkante — die Sektion traegt hier keinen
   Innenabstand, den setzt der Inhalt selbst. */
.gah-sec--hero {
	position: relative;
	padding-inline: 0;
	overflow: hidden;
}

.gah-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(520px, 56.4vw, 853px);
}

.gah-hero__bild {
	position: absolute;
	top: clamp(20px, 4.2vw, 63px);
	right: 0;
	bottom: 0;
	width: 62.3%;
	z-index: 0;
	pointer-events: none;
}

.gah-hero__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
}

.gah-hero__bild--mitte img { object-position: center top; }
.gah-hero__bild--unten img { object-position: center bottom; }

.gah-hero__inhalt,
.gah-hero__fuss {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--gah-inhalt-max) + 2 * (var(--gah-gutter) - var(--gah-panel-inset)));
	margin-inline: auto;
	padding-inline: calc(var(--gah-gutter) - var(--gah-panel-inset) + 32px)
		calc(var(--gah-gutter) - var(--gah-panel-inset));
}

.gah-hero__inhalt {
	padding-top: clamp(90px, 13.6vw, 206px);
}

/* Der Textblock selbst ist 632px breit, nicht der Wrapper — sonst zentriert
   margin-inline:auto die Spalte mitten ins Motiv. */
.gah-hero__inhalt > * {
	max-width: 632px;
}

/* Der Hero-Eyebrow ist im Figma 355px breit — ohne Deckel bricht er
   erst bei 632px und der Umbruch sitzt an anderer Stelle. */
.gah-hero__inhalt .gah-eyebrow {
	max-width: 355px;
}

.gah-hero__datum {
	margin-top: var(--gah-text-abstand);
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-hero__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(24px, 3vw, 40px);
	margin-top: auto;
	padding-bottom: 0;
}

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

.gah-countdown {
	display: flex;
	gap: clamp(12px, 2.1vw, 32px);
	width: auto;
}

.gah-countdown__karte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: clamp(96px, 13.8vw, 208px);
	min-height: clamp(104px, 11.6vw, 175px);
	padding: 16px;
	border-radius: var(--gah-radius-panel);
	background: var(--gah-weiss-15);
	-webkit-backdrop-filter: blur(10.9px);
	backdrop-filter: blur(10.9px);
	text-align: center;
}

.gah-countdown__wert {
	font-size: var(--gah-countdown);
	font-weight: 400;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.gah-countdown__label {
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-countdown__vorbei {
	font-size: var(--gah-basis);
	line-height: 1.2;
}

/* 5.3  Partnerleiste ----------------------------------------------------- */

.gah-sec--partner {
	background: var(--gah-partner-grund);
	color: var(--gah-blau);
	padding-inline: clamp(20px, 7.8vw, 118px);
}

.gah-partner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 2.1vw, 32px);
	min-height: 96px;
	padding-block: 16px;
}

.gah-partner__label {
	font-size: var(--gah-klein);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(var(--gah-blau-rgb), 0.75);
}

.gah-partner__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2.1vw, 32px);
	width: auto;
}

.gah-partner__slot {
	display: grid;
	place-items: center;
	width: 170px;
	max-width: 100%;
	height: 48px;
	border-radius: 6px;
	background: var(--gah-partner-slot);
	color: var(--gah-partner-schrift);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gah-partner__slot img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Ein gesetztes Logo braucht keinen grauen Kasten mehr. */
.gah-partner__slot--gefuellt {
	background: transparent;
}

/* 5.4  Textsektion ------------------------------------------------------- */

/* Im Entwurf bricht „Warum dieser Abend?“ nach „dieser“ um. */
.gah-textsektion__kopf .gah-titel {
	max-width: 12ch;
}

.gah-textsektion__text .gah-text + .gah-text {
	margin-top: 1.2em;
}

/* 5.5  Spalten (Programm) ------------------------------------------------ */

/* Der Programmkopf hat im Figma ein eigenes Raster: die Einleitung beginnt
   bei x 618 und ist 370px breit — anders als bei Einordnung und Tickets,
   wo sie bei x 740 sitzt. Handgesetzt, hier übernommen. */
.gah-spalten__kopf {
	margin-bottom: clamp(40px, 5.4vw, 82px);
	grid-template-columns: minmax(0, 478fr) minmax(0, 754fr);
}

.gah-spalten__intro {
	font-size: var(--gah-basis);
	line-height: 1.2;
	/* Handgesetzter Textrahmen im Figma: bricht dort auf drei Zeilen. */
	max-width: min(100%, 370px);
}

/* Drei gleiche Spalten mit 0,5px-Trennlinien. Im Figma sind sie
   handgesetzt unterschiedlich breit (448/441/360) — hier normalisiert. */
.gah-spalten__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
}

.gah-spalten__spalte {
	padding-inline: clamp(20px, 2.4vw, 36px);
}

.gah-spalten__spalte:first-child {
	padding-inline-start: 0;
}

.gah-spalten__spalte:last-child {
	padding-inline-end: 0;
}

.gah-spalten__spalte + .gah-spalten__spalte {
	border-inline-start: 0.5px solid var(--gah-weiss);
}

.gah-spalten__titel {
	font-family: var(--gah-schrift-display);
	font-size: var(--gah-h3-display);
	font-weight: 400;
	line-height: 1.2;
	max-width: 15ch;
	margin-bottom: clamp(24px, 3.2vw, 48px);
}

.gah-spalten__punkte li {
	position: relative;
	padding-left: 14px;
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-spalten__punkte li + li {
	margin-top: 6px;
}

.gah-spalten__punkte li::before {
	content: "\00B7";
	position: absolute;
	left: 2px;
}

.gah-spalten__fuss {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(48px, 6.7vw, 101px);
}

/* 5.6  Medien + Text (Referent, Kontakt) --------------------------------- */

.gah-medien__kopf {
	margin-bottom: clamp(32px, 4.2vw, 64px);
}

/* Im Entwurf bricht „Prof. Dr. Bernd Raffelhüschen“ nach „Bernd“ um,
   „Lassen Sie uns reden“ dagegen nicht — daher nur beim Hochformat. */
.gah-medien--hoch .gah-medien__kopf .gah-titel {
	max-width: 16ch;
}

.gah-medien__raster {
	display: grid;
	gap: var(--gah-spalten-abstand);
	align-items: start;
}

/* Portraet 483px bei x=140, Text beginnt bei x=740 (Figma). */
.gah-medien--hoch .gah-medien__raster {
	grid-template-columns: minmax(0, 483px) minmax(0, 1fr);
	gap: clamp(24px, 7.74vw, 117px);
}

/* Bild 512px, rechtsbuendig — beginnt damit bei x=860 (Figma). */
.gah-medien--quer .gah-medien__raster {
	grid-template-columns: minmax(0, 1fr) minmax(0, 512px);
}

.gah-medien--bild-rechts .gah-medien__bild {
	order: 2;
}

.gah-medien__bild img,
.gah-medien__bild .gah-bild-platzhalter {
	width: 100%;
	border-radius: var(--gah-radius-bild);
	object-fit: cover;
}

.gah-medien--hoch .gah-medien__bild img {
	aspect-ratio: 482.8 / 630;
}

.gah-medien--quer .gah-medien__bild img,
.gah-medien--quer .gah-medien__bild .gah-bild-platzhalter {
	aspect-ratio: 512 / 438;
}

.gah-medien--hoch .gah-medien__bild .gah-bild-platzhalter {
	aspect-ratio: 482.8 / 630;
}

/* 5.7  Tickets ----------------------------------------------------------- */

.gah-tickets__kopf {
	margin-bottom: clamp(40px, 5.5vw, 83px);
}

/* Ebenfalls handgesetzt: die Einleitung ist schmaler als ihre Spalte. */
.gah-tickets__kopf .gah-text {
	max-width: min(100%, 360px);
}

/* Karte 720px bei x=140, Rail beginnt bei x=989 (Figma). */
.gah-tickets__raster {
	display: grid;
	grid-template-columns: minmax(0, 720fr) minmax(0, 387fr);
	gap: clamp(24px, 8.27vw, 125px);
	align-items: start;
}

/* Die Karte selbst traegt nur den seitlichen Innenabstand; oben und unten
   setzen ihn die drei Baender, weil der Entwurf sie ungleich bemisst
   (gemessen: Kopf 191, Menge 146, Fuss 142 px). */
.gah-tickets__karte {
	border: 1px solid var(--gah-weiss);
	border-radius: var(--gah-radius-panel);
	padding-inline: clamp(24px, 2.31vw, 35px);
}

.gah-tickets__karte-kopf {
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
	gap: 0;
	align-items: start;
	padding-top: clamp(28px, 3.64vw, 55px);
	padding-bottom: clamp(32px, 4.23vw, 64px);
}

.gah-tickets__karte-titel {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-family: var(--gah-schrift-display);
	font-size: var(--gah-h2-display);
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
}

.gah-tickets__karte-zeilen {
	font-size: var(--gah-basis);
	line-height: 1.4;
}

.gah-tickets__menge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: clamp(28px, 3.64vw, 55px) clamp(24px, 2.91vw, 44px);
	border-top: 0.5px solid var(--gah-weiss);
	border-bottom: 0.5px solid var(--gah-weiss);
}

.gah-tickets__menge-label {
	font-size: var(--gah-label);
	font-weight: 400;
	line-height: 1.4;
}

.gah-tickets__fuss > button {
	margin-top: clamp(0px, 0.46vw, 7px);
}

.gah-tickets__fuss {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	padding-block: clamp(18px, 1.65vw, 25px) clamp(20px, 1.85vw, 28px);
}

.gah-tickets__hinweis {
	font-size: var(--gah-basis);
	line-height: 1.4;
	/* Gemessen: die Textspalte im Entwurf ist höchstens 305px breit und
	   bricht dadurch auf vier Zeilen. Breiter wären es drei und die Karte
	   fiele um 23px zu niedrig aus. */
	max-width: min(100%, 305px);
}

.gah-tickets__fehler {
	grid-column: 1 / -1;
	margin-top: 8px;
	font-size: var(--gah-basis);
	line-height: 1.2;
	font-weight: 500;
}

/* Rechte Spalte: Kostenlos / Begleitung / Telefonisch */
.gah-tickets__rail {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4.03vw, 61px);
	/* Die erste Ueberschrift steht auf Hoehe der Kartenoberkante. */
	padding-top: clamp(0px, 0.33vw, 5px);
}

/* Pfeil links, Inhalt rechts: dadurch steht der Fliesstext unter dem Wort
   der Ueberschrift und nicht unter dem Pfeil (Entwurf x 1033 statt 984). */
.gah-tickets__rail-eintrag {
	display: grid;
	/* Feste Pfeilspalte statt auto + gap: sonst haengt der Einzug an der
	   Glyphenbreite der jeweiligen Schrift. Im Entwurf sind es 49px bei
	   45px Schriftgroesse, also das 1,09-fache. */
	grid-template-columns: calc(var(--gah-h2-display) * 1.09) minmax(0, 1fr);
	gap: 0;
	align-items: start;
}

.gah-tickets__rail-eintrag > .gah-pfeil {
	font-size: var(--gah-h2-display);
	line-height: 1.2;
}

.gah-tickets__rail-titel {
	font-family: var(--gah-schrift-display);
	font-size: var(--gah-h2-display);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: clamp(12px, 1.26vw, 19px);
}

.gah-tickets__rail-text {
	font-size: var(--gah-basis);
	line-height: 1.2;
}

/* Flex-Kinder haben min-width:auto — ohne das steht ein langes Wort aus
   der Spalte heraus, statt umzubrechen. */
.gah-tickets__rail-titel > span,
.gah-tickets__karte-titel > span {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Mengenfeld — Optik des Selects aus dem Design (113x48, Radius 8) */
/* Das Mengenfeld steht im Entwurf nicht buendig rechts, sondern 23px
   eingerueckt — anders als die Absenden-Pill darunter. Handgesetzt im
   Figma, hier uebernommen. */
.gah-tickets__menge .gah-menge {
	margin-right: clamp(0px, 1.26vw, 19px);
}

.gah-menge {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 113px;
	height: 48px;
	border: 1px solid var(--gah-weiss);
	border-radius: var(--gah-radius-select);
	background: transparent;
	box-shadow: var(--gah-schatten-select);
}

.gah-menge select,
.gah-menge input[type="number"] {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 100%;
	padding: 0 32px 0 16px;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: var(--gah-weiss);
	font-family: var(--gah-schrift);
	font-size: var(--gah-basis);
	line-height: 1;
	cursor: pointer;
}

.gah-menge select option {
	color: var(--gah-dunkel);
	background: var(--gah-weiss);
}

.gah-menge__chevron {
	position: absolute;
	right: 16px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--gah-weiss);
}

/* 5.8  Anfahrt ----------------------------------------------------------- */

/* Karte 632px, rechtsbuendig — beginnt damit bei x=740 (Figma). */
.gah-anfahrt__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 632px);
	gap: var(--gah-spalten-abstand);
	align-items: start;
}

.gah-anfahrt__block + .gah-anfahrt__block {
	margin-top: clamp(24px, 2.6vw, 40px);
}

.gah-anfahrt__block-titel {
	font-size: var(--gah-basis);
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 4px;
}

/* Karte: Klick-zum-Laden, der Platzhalter ist der Zustand vor der Einwilligung */
.gah-karte {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 632 / 438;
	border-radius: var(--gah-radius-bild);
	background: var(--gah-blau-22);
	overflow: hidden;
}

.gah-karte__consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 42ch;
	padding: clamp(20px, 3vw, 40px);
	text-align: center;
}

.gah-karte__consent-titel {
	font-size: var(--gah-gross);
	font-weight: 500;
	line-height: 1.2;
}

.gah-karte__consent-text {
	font-size: var(--gah-basis);
	line-height: 1.3;
}

.gah-karte__knopf {
	border: 1px solid var(--gah-blau);
	background: var(--gah-blau);
	color: var(--gah-weiss);
	padding: 12px 24px;
}

.gah-page .gah-karte__knopf:hover,
.gah-page .gah-karte__knopf:focus-visible {
	background: var(--gah-dunkel);
	border-color: var(--gah-dunkel);
	color: var(--gah-weiss);
}

.gah-karte__rahmen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.gah-karte__link {
	margin-top: 8px;
	font-size: var(--gah-basis);
}

/* 5.9  FAQ --------------------------------------------------------------- */

.gah-faq__kopf {
	margin-bottom: clamp(32px, 4.5vw, 68px);
}

.gah-faq__gruppe {
	font-size: var(--gah-gross);
	line-height: 1;
	margin-bottom: clamp(12px, 1.5vw, 22px);
}

.gah-faq__liste {
	max-width: 1060px;
}

.gah-faq__eintrag {
	border-bottom: 1px solid var(--gah-weiss);
}

.gah-faq__eintrag:first-child {
	border-top: 1px solid var(--gah-weiss);
}

.gah-faq__frage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding-block: clamp(18px, 2.1vw, 32px);
	border: 0;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--gah-gross);
	font-weight: 400;
	line-height: 1;
	text-align: left;
	cursor: pointer;
}

.gah-faq__pfeil {
	flex: 0 0 auto;
	font-size: var(--gah-gross);
	line-height: 1;
	transition: transform 0.2s ease-out;
}

.gah-faq__frage[aria-expanded="true"] .gah-faq__pfeil {
	transform: rotate(90deg);
}

.gah-faq__frage:hover .gah-faq__pfeil,
.gah-faq__frage:focus-visible .gah-faq__pfeil {
	transform: translateX(4px);
}

.gah-faq__frage[aria-expanded="true"]:hover .gah-faq__pfeil {
	transform: rotate(90deg) translateX(4px);
}

.gah-faq__antwort {
	padding-bottom: clamp(18px, 2.1vw, 32px);
	font-size: var(--gah-basis);
	line-height: 1.3;
	max-width: 70ch;
}

.gah-faq__antwort[hidden] {
	display: none;
}

/* 5.10  Footer ----------------------------------------------------------- */

.gah-footer__raster {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: clamp(24px, 3.2vw, 48px);
	align-items: start;
}

.gah-footer__adresse {
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-footer__kontakt {
	margin-top: 1.2em;
}

.gah-footer__rechts {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(20px, 2.6vw, 40px);
	width: auto;
}

.gah-footer__social {
	display: flex;
	gap: 14px;
	width: auto;
}

.gah-footer__social a {
	display: grid;
	place-items: center;
	width: 37px;
	height: 37px;
}

.gah-footer__social svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.gah-footer__rechtlich {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: clamp(14px, 1.6vw, 24px);
	width: auto;
	font-size: var(--gah-basis);
}

.gah-footer__rechtlich a {
	text-decoration: none;
}

.gah-footer__rechtlich a:hover,
.gah-footer__rechtlich a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 5.11  Anmeldung (Schritt 2) und Rechtstexte ---------------------------- */

.gah-anmeldung__kopf {
	margin-bottom: clamp(24px, 3.2vw, 48px);
}

.gah-anmeldung__raster {
	display: grid;
	grid-template-columns: minmax(0, 720fr) minmax(0, 383fr);
	gap: clamp(24px, 8.53vw, 129px);
	align-items: start;
}

.gah-anmeldung__karte {
	border: 1px solid var(--gah-weiss);
	border-radius: var(--gah-radius-panel);
	padding: clamp(24px, 2.3vw, 35px);
}

.gah-anmeldung__zusammenfassung {
	padding-bottom: clamp(20px, 2.7vw, 40px);
	margin-bottom: clamp(20px, 2.7vw, 40px);
	border-bottom: 0.5px solid var(--gah-weiss);
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-anmeldung__zurueck {
	display: inline-block;
	margin-top: clamp(20px, 2.1vw, 32px);
	font-size: var(--gah-basis);
}

.gah-rechtstext {
	max-width: 75ch;
}

.gah-rechtstext :where(p, ul, ol) + :where(p, ul, ol, h2, h3) {
	margin-top: 1.2em;
}

.gah-rechtstext :where(h2, h3) {
	font-weight: 500;
	margin-top: 1.6em;
	margin-bottom: 0.4em;
}

.gah-rechtstext ul {
	list-style: disc;
	padding-left: 1.4em;
}

/* -------------------------------------------------------------------------
   6  Bold-Tickets-Formular
   Das Plugin rendert reines, klassenbasiertes Markup ohne Inline-Styles.
   Sein eigenes Stylesheet ist abgeschaltet (Filter in event.php), die Optik
   kommt vollstaendig von hier.
   ---------------------------------------------------------------------- */

.gah-formular .bold-tickets {
	color: inherit;
	font-family: var(--gah-schrift);
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-formular .bold-tickets__card,
.gah-formular .bold-tickets__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

.gah-formular .bold-tickets__table th,
.gah-formular .bold-tickets__table td {
	padding: 0 0 clamp(16px, 2.1vw, 24px);
	border: 0;
	background: transparent;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

.gah-formular .bold-tickets__name {
	font-size: var(--gah-label);
	line-height: 1.4;
}

.gah-formular .bold-tickets__desc {
	display: block;
	margin-top: 4px;
	font-size: var(--gah-basis);
	line-height: 1.2;
	opacity: 0.85;
}

.gah-formular .bold-tickets__price {
	text-align: right;
	padding-right: 16px;
	font-variant-numeric: tabular-nums;
}

.gah-formular .bold-tickets__qty {
	width: 113px;
	text-align: right;
}

/* Das Zahlenfeld traegt die Optik des Selects aus dem Design. */
.gah-formular .bold-tickets__qty input[type="number"] {
	appearance: textfield;
	-webkit-appearance: textfield;
	width: 113px;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--gah-weiss);
	border-radius: var(--gah-radius-select);
	background: transparent;
	box-shadow: var(--gah-schatten-select);
	color: var(--gah-weiss);
	font-family: var(--gah-schrift);
	font-size: var(--gah-basis);
	line-height: 1;
}

.gah-formular .bold-tickets__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(16px, 2.1vw, 24px);
	margin-block: clamp(20px, 2.7vw, 32px);
}

.gah-formular .bold-tickets__fields p {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.gah-formular .bold-tickets__fields label {
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-formular :where(.bold-tickets input[type="text"], .bold-tickets input[type="email"]) {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--gah-weiss);
	border-radius: var(--gah-radius-select);
	background: transparent;
	box-shadow: var(--gah-schatten-select);
	color: var(--gah-weiss);
	font-family: var(--gah-schrift);
	font-size: var(--gah-basis);
	line-height: 1;
}

.gah-formular .bold-tickets input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

/* Der Honigtopf bleibt fuer Menschen unsichtbar, fuer Bots erreichbar.
   Das Plugin setzt ihn per Inline-Style; das Element ersetzt das Attribut
   durch diese Klasse, damit im HTML kein style-Attribut uebrig bleibt. */
.gah-formular .bold-tickets__hp {
	position: absolute;
	left: -9999px;
}

.gah-formular .bold-tickets__consent {
	display: block;
	margin-block: clamp(16px, 2.1vw, 24px);
	font-size: var(--gah-basis);
	line-height: 1.35;
}

.gah-formular .bold-tickets__consent label {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.gah-formular .bold-tickets__consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--gah-weiss);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
}

.gah-formular .bold-tickets__consent input[type="checkbox"]:checked {
	background: var(--gah-weiss);
	box-shadow: inset 0 0 0 4px var(--gah-blau);
}

.gah-formular .bold-tickets__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gah-formular .bold-tickets__hint {
	font-size: var(--gah-basis);
	line-height: 1.3;
	opacity: 0.9;
}

/* Absenden traegt die gefuellte Pill aus dem Design. */
.gah-formular .bold-tickets__submit,
.gah-formular .bold-tickets__submit.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 14px 24px;
	border: 1px solid var(--gah-weiss);
	border-radius: var(--gah-radius-pill);
	background: var(--gah-weiss);
	color: var(--gah-blau);
	font-family: var(--gah-schrift-display);
	font-size: var(--gah-basis);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease-out;
}

.gah-formular .bold-tickets__submit:hover,
.gah-formular .bold-tickets__submit:focus-visible {
	background: var(--gah-weiss);
	color: var(--gah-dunkel);
}

.gah-formular .bold-tickets__notice {
	padding: 16px 20px;
	margin-bottom: clamp(16px, 2.1vw, 24px);
	border: 1px solid var(--gah-weiss);
	border-radius: var(--gah-radius-select);
	font-size: var(--gah-basis);
	line-height: 1.3;
}

.gah-formular .bold-tickets__notice--success {
	background: var(--gah-weiss-15);
}

.gah-formular .bold-tickets__notice--error {
	border-width: 2px;
	font-weight: 500;
}

.gah-formular .bold-tickets__remaining,
.gah-formular .bold-tickets__soldout {
	font-size: var(--gah-basis);
	line-height: 1.2;
}

/* Zwischenueberschriften: das Formular hat zwei Abschnitte — die Personen,
   die kommen, und die Person, die anmeldet. */
.gah-formular__abschnitt {
	margin-top: clamp(24px, 3vw, 40px);
	margin-bottom: clamp(12px, 1.5vw, 18px);
	padding-top: clamp(20px, 2.7vw, 32px);
	border-top: 0.5px solid var(--gah-weiss);
	font-size: var(--gah-label);
	font-weight: 400;
	line-height: 1.4;
}

.gah-formular .bold-tickets__attendees {
	margin-bottom: clamp(16px, 2.1vw, 24px);
}

.gah-formular .bold-tickets__attendees.is-empty .bold-tickets__attendees-intro {
	display: none;
}

.gah-formular .bold-tickets__attendees-intro {
	margin-bottom: clamp(16px, 2.1vw, 24px);
	font-size: var(--gah-basis);
	line-height: 1.3;
}

/* Eine Karte je Ticket, damit sichtbar ist, wo die eine Person aufhoert
   und die naechste anfaengt. */
.gah-formular .bold-tickets__attendee {
	margin: 0 0 clamp(16px, 2.1vw, 24px);
	padding: clamp(16px, 2.1vw, 24px);
	border: 1px solid var(--gah-weiss);
	border-radius: var(--gah-radius-select);
}

.gah-formular .bold-tickets__attendee:last-child {
	margin-bottom: 0;
}

.gah-formular .bold-tickets__attendee legend {
	padding: 0 10px;
	font-size: var(--gah-basis);
	line-height: 1.2;
}

/* Im Teilnehmerblock stehen Beschriftung und Feld ineinander verschachtelt
   (<label>Vorname<input></label>) — das Raster muss auf dem Label greifen. */
.gah-formular .bold-tickets__attendee .bold-tickets__fields label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--gah-basis);
	line-height: 1.2;
}

.gah-formular .bold-tickets__attendee .bold-tickets__fields {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
   7  Bewegung, Fokus, Druck
   ---------------------------------------------------------------------- */

/* Fokus ist im Handoff nicht spezifiziert und Pflicht: 2px, sichtbar,
   weiss auf blauen Panels, blau auf weissem Grund. */
.gah-page :where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.gah-sec--panel :where(a, button, input, select, textarea):focus-visible {
	outline-color: var(--gah-weiss);
}

@media (prefers-reduced-motion: reduce) {
	.gah-page *,
	.gah-page *::before,
	.gah-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
   8  Responsive
   Media Queries nur dort, wo sich das VERHALTEN aendert (§9.5).
   ---------------------------------------------------------------------- */

/* Ab hier stapelt der Hero: Text ueber Bild statt Text auf Bild.
   Genau zwei Zustaende, keine Zwischenstufen (§9.6). */
@media (max-width: 900px) {
	.gah-hero {
		min-height: 0;
	}

	/* Das Motiv rutscht UNTER den Text (Handoff: „portrait moves behind or
	   below the text“). Ueber der Ueberschrift stuende sonst das schwerste
	   Bild der Seite vor dem wichtigsten Satz. */
	.gah-hero__bild {
		order: 1;
		position: static;
		width: 100%;
		margin-top: clamp(24px, 5vw, 40px);
		aspect-ratio: 915 / 790;
	}

	.gah-hero__inhalt {
		order: 0;
		max-width: 100%;
		padding-top: clamp(96px, 18vw, 140px);
	}

	.gah-hero__fuss {
		order: 2;
		flex-direction: column;
		align-items: stretch;
		margin-top: clamp(24px, 5vw, 40px);
	}

	.gah-countdown {
		width: 100%;
	}

	.gah-countdown__karte {
		flex: 1 1 0;
		width: auto;
	}

	/* Programmspalten: drei -> eine, Trennlinien werden waagerecht */
	.gah-spalten__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.gah-spalten__spalte {
		padding-inline: 0;
	}

	.gah-spalten__spalte + .gah-spalten__spalte {
		border-inline-start: 0;
		border-top: 0.5px solid var(--gah-weiss);
		margin-top: clamp(32px, 5vw, 48px);
		padding-top: clamp(32px, 5vw, 48px);
	}

	.gah-spalten__fuss {
		justify-content: flex-start;
	}

	/* Ticketkarte volle Breite, Rail darunter.
	   Die Medien-Raster brauchen ihren Modifikator mit: sonst gewinnt
	   .gah-medien--hoch .gah-medien__raster (0,2,0) und die feste
	   483px-Spalte bleibt auch mobil stehen (gemessen, §12.2). */
	.gah-tickets__raster,
	.gah-anmeldung__raster,
	.gah-medien__raster,
	.gah-medien--hoch .gah-medien__raster,
	.gah-medien--quer .gah-medien__raster,
	.gah-anfahrt__raster,
	.gah-zweispaltig {
		grid-template-columns: minmax(0, 1fr);
	}

	.gah-medien--bild-rechts .gah-medien__bild {
		order: 0;
	}

	/* Gestapelt braucht der Kopf wieder einen Zeilenabstand — waagerecht
	   ist er 0, weil die Spaltenbreite die Position bestimmt. */
	.gah-tickets__karte-kopf {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(12px, 2vw, 18px);
	}

	.gah-tickets__karte-titel {
		white-space: normal;
	}

	/* Label und Mengenfeld stapeln */
	.gah-tickets__menge {
		flex-direction: column;
		align-items: flex-start;
	}

	.gah-tickets__fuss {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.gah-footer__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.gah-footer__rechts {
		align-items: flex-start;
	}

	.gah-footer__rechtlich {
		justify-content: flex-start;
	}

	/* Der 32px-Versatz von Hero und Kontakt ergibt schmal keinen Sinn mehr. */
	.gah-sec--versatz .gah-inner {
		padding-left: 0;
	}
}

/* Stufe 1: der 32px-Versatz der Kopfzeile entfaellt, die Navigation rueckt
   zusammen. Ab hier wird es sonst eng. */
@media (max-width: 900px) {
	.gah-header__inner {
		padding-inline: var(--gah-gutter);
		gap: 16px;
	}
}

/* Stufe 2: Navigation weg. Der Zugang zur Anmeldung bleibt über die
   CTA-Pill jederzeit erhalten. */
@media (max-width: 820px) {
	.gah-header__nav {
		display: none;
	}
}

/* Stufe 3: Logo kleiner, Pill kompakter. */
@media (max-width: 720px) {
	.gah-header__inner {
		gap: 12px;
	}

	.gah-header .gah-logo__svg {
		width: clamp(116px, 30vw, 200px);
	}

	.gah-page .gah-header .gah-pill--voll {
		padding: 14px 18px;
	}

	.gah-partner {
		justify-content: flex-start;
	}

	.gah-partner__liste {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.gah-partner__slot {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.gah-pill--kontur {
		min-width: 0;
		width: 100%;
	}

	.gah-countdown {
		flex-wrap: wrap;
	}

	.gah-formular .bold-tickets__table,
	.gah-formular .bold-tickets__table tbody,
	.gah-formular .bold-tickets__table tr,
	.gah-formular .bold-tickets__table th,
	.gah-formular .bold-tickets__table td {
		display: block;
		width: 100%;
	}

	.gah-formular .bold-tickets__price,
	.gah-formular .bold-tickets__qty {
		text-align: left;
		padding-right: 0;
	}
}

/* Stufe 4: unter 380px faellt auch das Pfeilzeichen der Kopf-Pill weg —
   es ist dekorativ (aria-hidden) und kostet 18px, die dort fehlen. */
@media (max-width: 380px) {
	.gah-header .gah-logo__svg {
		width: 104px;
	}

	.gah-header .gah-pill--voll .gah-pfeil {
		display: none;
	}

	.gah-page .gah-header .gah-pill--voll {
		padding: 14px 14px;
	}
}