/* ==========================================================================
   Spielradar — единственный стилевой файл темы.

   Почему один файл: сайт редакционный, страниц-типов пять, и разбивать CSS на
   критический/отложенный смысла нет — весь он меньше, чем один HTTP-раунд-трип
   за вторым файлом. Порядок разделов: токены → база → каркас → шапка → главная
   → карточки → статья → архивы → подвал → адаптив.
   ========================================================================== */

/* --- 1. Токены ----------------------------------------------------------- */
:root {
	/* Палитра «ночной сигнал»: холодный сине-чёрный корпус, кислотно-мятный
	   акцент для действий и малиновый для срочного. Оба акцента проверены на
	   контраст ≥ 4.5:1 к фону gr-grund-0. */
	--gr-grund-0: #0b0e15;   /* фон страницы */
	--gr-grund-1: #131824;   /* карточки, поля */
	--gr-grund-2: #1b2231;   /* приподнятые поверхности, hover */
	--gr-grund-3: #232c3e;   /* акцентные полосы секций */
	--gr-kante:   #2c3549;   /* обводки */

	--gr-text:    #eef2f9;
	--gr-text-2:  #9eabc2;   /* 7.6:1 к grund-0 — безопасно для вторичного текста */
	--gr-text-3:  #7d8aa2;   /* только для 14px+ не-критичных подписей, 4.9:1 */

	--gr-signal:  #2ef2ab;   /* основной акцент: ссылки, активные состояния */
	--gr-signal-tief: #0a1f19;/* текст поверх сигнального фона */
	--gr-alarm:   #ff4d72;   /* «live», срочное, ошибки */
	--gr-violett: #9b82ff;   /* киберспортивная секция */
	--gr-note:    #ffb638;   /* оценки тестов */

	--gr-breite: 78rem;      /* 1248px — комфортно для сетки в четыре колонки */
	--gr-schmal: 45rem;      /* колонка текста статьи, ~75 знаков */
	--gr-rand: clamp( 1rem, 4vw, 2.5rem );
	--gr-luft: clamp( 2.75rem, 6vw, 5rem );  /* вертикальный ритм между секциями */

	--gr-radius: 3px;        /* почти прямые углы — жанр требует техничности */
	--gr-schnitt: 14px;      /* глубина среза угла */
	--gr-schnell: 140ms;

	/* Системные шрифты. Веб-шрифтов нет сознательно: это и скорость, и один
	   внешний запрос меньше в сетевом следе сайта. */
	--gr-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gr-schrift-titel: "Segoe UI Semibold", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--gr-schrift-zahl: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* --- 2. База ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	/* overflow-x на html, а не на body: иначе position:sticky в шапке перестаёт
	   работать в WebKit. */
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var( --gr-grund-0 );
	color: var( --gr-text );
	font-family: var( --gr-schrift );
	font-size: 1rem;
	line-height: 1.65;
	/* Фоновая сетка-«радар»: два линейных градиента вместо картинки — 0 байт
	   трафика и никакого декодирования. */
	background-image:
		linear-gradient( rgba( 255, 255, 255, .022 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 255, 255, 255, .022 ) 1px, transparent 1px );
	background-size: 64px 64px, 64px 64px;
	background-attachment: fixed;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var( --gr-signal ); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: #7ef8c9; }

:focus-visible {
	outline: 2px solid var( --gr-signal );
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var( --gr-schrift-titel );
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.015em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

/* Экранный ридер: текст есть, места не занимает. */
.gr-versteckt {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset( 50% );
	overflow: hidden; white-space: nowrap;
}

.gr-sprung {
	position: absolute;
	left: -9999px;
	z-index: 100;
	background: var( --gr-signal );
	color: var( --gr-signal-tief );
	padding: .7rem 1.1rem;
	font-weight: 700;
}
.gr-sprung:focus { left: .5rem; top: .5rem; }

/* --- 3. Каркас ----------------------------------------------------------- */
.gr-schrank {
	width: 100%;
	max-width: var( --gr-breite );
	margin-inline: auto;
	padding-inline: var( --gr-rand );
}
.gr-schrank--schmal { max-width: calc( var( --gr-schmal ) + 2 * var( --gr-rand ) ); }

.gr-hauptteil { display: block; padding-bottom: var( --gr-luft ); }

.gr-abschnitt { padding-block: var( --gr-luft ); }
.gr-abschnitt--eng { padding-block: clamp( 1.5rem, 3vw, 2.25rem ); }

/* Выделенная секция: своя подложка и тонкая сигнальная линия сверху — так
   киберспорт визуально отделяется от общей ленты без лишней рамки. */
.gr-abschnitt--betont {
	background: linear-gradient( 180deg, var( --gr-grund-1 ), var( --gr-grund-0 ) );
	border-top: 1px solid var( --gr-kante );
	position: relative;
}
.gr-abschnitt--betont::before {
	content: "";
	position: absolute; inset-block-start: -1px; inset-inline-start: 0;
	width: clamp( 5rem, 18vw, 14rem ); height: 2px;
	background: linear-gradient( 90deg, var( --gr-violett ), transparent );
}

.gr-abschnitt-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: clamp( 1.25rem, 3vw, 2rem );
}

.gr-abschnitt-titel {
	margin: 0;
	font-size: clamp( 1.35rem, 3.2vw, 2rem );
	text-transform: uppercase;
	letter-spacing: .01em;
	position: relative;
	padding-left: 1rem;
}
/* Скошенная риска перед заголовком — опознавательный знак секции. */
.gr-abschnitt-titel::before {
	content: "";
	position: absolute; left: 0; top: .14em; bottom: .14em;
	width: 5px;
	background: var( --gr-signal );
	transform: skewX( -12deg );
}
.gr-abschnitt--betont .gr-abschnitt-titel::before { background: var( --gr-violett ); }

.gr-mehr {
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
	white-space: nowrap;
}
.gr-mehr::after { content: " →"; }

.gr-oben {
	margin: 0 0 .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --gr-text-2 );
}

.gr-knopf {
	display: inline-block;
	background: var( --gr-signal );
	color: var( --gr-signal-tief );
	font-weight: 700;
	text-decoration: none;
	padding: .7rem 1.4rem;
	clip-path: polygon( 10px 0, 100% 0, 100% calc( 100% - 10px ), calc( 100% - 10px ) 100%, 0 100%, 0 10px );
	transition: background var( --gr-schnell ) ease;
}
.gr-knopf:hover { background: #7ef8c9; color: var( --gr-signal-tief ); }

/* --- 4. Шапка ------------------------------------------------------------ */
.gr-leiste {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba( 11, 14, 21, .92 );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid var( --gr-kante );
}

.gr-leiste-zeile {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 3.75rem;
}

.gr-marke {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	margin-right: auto;
	min-width: 0;   /* иначе длинное имя сайта распирает flex-строку наружу */
}
.gr-marke-zeichen { width: auto; height: 2rem; }
.gr-marke-wort {
	font-family: var( --gr-schrift-titel );
	font-weight: 800;
	font-size: clamp( 1.05rem, 3.4vw, 1.3rem );
	letter-spacing: -.02em;
	color: var( --gr-text );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gr-marke-wort::first-letter { color: var( --gr-signal ); }

.gr-schalter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem; height: 2.5rem;
	background: var( --gr-grund-2 );
	border: 1px solid var( --gr-kante );
	border-radius: var( --gr-radius );
	cursor: pointer;
	flex: 0 0 auto;
}
/* «Бургер» рисуем одной полоской и двумя псевдоэлементами — без лишних узлов. */
.gr-schalter-strich,
.gr-schalter-strich::before,
.gr-schalter-strich::after {
	display: block;
	width: 1.15rem; height: 2px;
	background: var( --gr-text );
	transition: transform var( --gr-schnell ) ease, opacity var( --gr-schnell ) ease;
}
.gr-schalter-strich { position: relative; }
.gr-schalter-strich::before,
.gr-schalter-strich::after { content: ""; position: absolute; left: 0; }
.gr-schalter-strich::before { top: -6px; }
.gr-schalter-strich::after { top: 6px; }

.gr-schalter[aria-expanded="true"] .gr-schalter-strich { background: transparent; }
.gr-schalter[aria-expanded="true"] .gr-schalter-strich::before { transform: translateY( 6px ) rotate( 45deg ); }
.gr-schalter[aria-expanded="true"] .gr-schalter-strich::after { transform: translateY( -6px ) rotate( -45deg ); }

.gr-navigation { display: none; }
.gr-navigation[data-offen="ja"] {
	display: block;
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var( --gr-grund-1 );
	border-bottom: 1px solid var( --gr-kante );
	padding: 1rem var( --gr-rand ) 1.25rem;
	max-height: calc( 100dvh - 3.75rem );
	overflow-y: auto;
}

.gr-menue { list-style: none; margin: 0; padding: 0; }
.gr-menue li { border-bottom: 1px solid var( --gr-kante ); }
.gr-menue a {
	display: block;
	padding: .7rem 0;
	color: var( --gr-text );
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .92rem;
}
.gr-menue a:hover,
.gr-menue .current-menu-item > a,
.gr-menue-punkt--aktiv > a { color: var( --gr-signal ); }
/* Подменю на мобильном просто вкладывается, поп-апы на тач-экране бесполезны. */
.gr-menue .sub-menu { list-style: none; margin: 0; padding: 0 0 .4rem .9rem; }
.gr-menue .sub-menu a { font-size: .85rem; text-transform: none; color: var( --gr-text-2 ); }

.gr-suche { display: flex; gap: .5rem; margin-top: 1rem; }
.gr-suchfeld {
	flex: 1 1 auto;
	min-width: 0;   /* без этого input не даёт flex-строке сжиматься — источник горизонтального скролла */
	background: var( --gr-grund-0 );
	border: 1px solid var( --gr-kante );
	border-radius: var( --gr-radius );
	color: var( --gr-text );
	padding: .55rem .75rem;
	font: inherit;
	font-size: .95rem;
}
.gr-suchfeld::placeholder { color: var( --gr-text-3 ); }
.gr-suchknopf {
	background: transparent;
	border: 1px solid var( --gr-signal );
	color: var( --gr-signal );
	border-radius: var( --gr-radius );
	padding: .55rem .9rem;
	font: inherit;
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
	white-space: nowrap;
}
.gr-suchknopf:hover { background: var( --gr-signal ); color: var( --gr-signal-tief ); }
.gr-suche--breit { max-width: 28rem; }

/* --- 5. Герой главной ---------------------------------------------------- */
.gr-held {
	position: relative;
	isolation: isolate;
	padding-block: clamp( 2rem, 7vw, 4.5rem );
	border-bottom: 1px solid var( --gr-kante );
	overflow: hidden;
}
.gr-held-grund {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: -2;
	opacity: .32;
}
/* Заглушка фона до заливки файла: тот же объём, тот же тон, никакого сдвига. */
.gr-held-grund--leer {
	display: block;
	background:
		radial-gradient( 60% 80% at 78% 20%, rgba( 46, 242, 171, .13 ), transparent 70% ),
		radial-gradient( 55% 70% at 10% 90%, rgba( 155, 130, 255, .16 ), transparent 70% ),
		var( --gr-grund-1 );
	opacity: 1;
}
.gr-held::after {
	/* Затемнение поверх фотографии: без него белый текст на светлом кадре теряет контраст. */
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient( 180deg, rgba( 11, 14, 21, .55 ), rgba( 11, 14, 21, .93 ) );
}

.gr-held-inhalt { display: grid; gap: clamp( 1.25rem, 3vw, 2rem ); }
.gr-held-neben { display: grid; gap: 1rem; align-content: start; }

.gr-held-titel { font-size: clamp( 2rem, 7vw, 3.5rem ); margin-bottom: .35em; }
.gr-held-satz { color: var( --gr-text-2 ); font-size: clamp( 1rem, 2.4vw, 1.2rem ); max-width: 36rem; }

/* --- 6. Сетки и карточки ------------------------------------------------- */
.gr-raster { display: grid; gap: clamp( 1rem, 2.5vw, 1.75rem ); grid-template-columns: 1fr; }

.gr-karte { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }

.gr-karte-tor { display: block; text-decoration: none; }

/* Рамка обложки: срезанный угол — фирменный приём темы, он же держит место
   под изображение через aspect-ratio у вложенного элемента. */
.gr-rahmen {
	display: block;
	position: relative;
	overflow: hidden;
	background: var( --gr-grund-2 );
	border: 1px solid var( --gr-kante );
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - var( --gr-schnitt ) ), calc( 100% - var( --gr-schnitt ) ) 100%, 0 100% );
}
.gr-bild {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 320ms ease, filter 320ms ease;
}
/* Пустой слот выглядит как технический экран, а не как поломка. */
.gr-bild--leer {
	display: block;
	width: 100%;
	background:
		repeating-linear-gradient( 135deg, rgba( 255, 255, 255, .035 ) 0 2px, transparent 2px 10px ),
		var( --gr-grund-2 );
}
.gr-karte-tor:hover .gr-bild { transform: scale( 1.035 ); filter: saturate( 1.15 ); }

.gr-karte-text { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }

.gr-karte-titel {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.25;
}
.gr-karte-titel a { color: var( --gr-text ); text-decoration: none; }
.gr-karte-titel a:hover { color: var( --gr-signal ); }

.gr-karte-anriss { margin: 0; color: var( --gr-text-2 ); font-size: .95rem; }

.gr-karte-fuss {
	margin: 0;
	font-size: .8rem;
	color: var( --gr-text-3 );
	display: flex; flex-wrap: wrap; gap: .4rem;
}
.gr-punkt { opacity: .6; }

/* Метка рубрики — скошенный прямоугольник, единственный цветной элемент карточки. */
.gr-marker {
	align-self: start;
	min-height: 1.9rem;
	display: inline-flex;
	align-items: center;
	display: inline-block;
	background: var( --gr-grund-3 );
	color: var( --gr-signal );
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .3rem .75rem;
	clip-path: polygon( 6px 0, 100% 0, calc( 100% - 6px ) 100%, 0 100% );
}
.gr-marker:hover { background: var( --gr-signal ); color: var( --gr-signal-tief ); }
.gr-marker--gross { font-size: .78rem; padding: .35rem .8rem; }

/* Оценка теста игры. Моноширинная цифра, чтобы 7.0 и 9.5 не «дышали» по ширине. */
.gr-note {
	position: absolute;
	top: 0; left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var( --gr-grund-0 );
	border-right: 1px solid var( --gr-kante );
	border-bottom: 2px solid var( --gr-note );
	padding: .3rem .6rem;
	line-height: 1.1;
}
.gr-note-zahl { font-family: var( --gr-schrift-zahl ); font-weight: 700; font-size: 1.05rem; color: var( --gr-note ); }
.gr-note-wort { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var( --gr-text-2 ); }
.gr-note--spitze { border-bottom-color: var( --gr-signal ); }
.gr-note--spitze .gr-note-zahl { color: var( --gr-signal ); }
.gr-note--gross { padding: .5rem .9rem; }
.gr-note--gross .gr-note-zahl { font-size: 1.6rem; }

/* Крупная карточка героя. */
.gr-karte--gross .gr-karte-titel { font-size: clamp( 1.5rem, 4.6vw, 2.6rem ); }
.gr-karte--gross .gr-karte-anriss { font-size: 1.05rem; }
.gr-karte--gross .gr-bild { aspect-ratio: 16 / 9; }

/* Горизонтальная карточка: картинка слева фиксированной доли, текст справа. */
.gr-karte--quer { flex-direction: row; gap: .9rem; align-items: start; }
.gr-karte--quer .gr-karte-tor { flex: 0 0 38%; max-width: 8.5rem; }
.gr-karte--quer .gr-karte-anriss { display: none; }
/* В компактной карточке метка рубрики на телефоне убирается: она слишком мелкая
   как тач-цель и стоит вплотную к ссылке заголовка. Контекст даёт сам заголовок. */
.gr-karte--quer .gr-marker { display: none; }
.gr-karte--quer .gr-karte-titel { font-size: 1rem; }
.gr-karte--quer .gr-rahmen { clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 8px ), calc( 100% - 8px ) 100%, 0 100% ); }

/* --- 7. Дисциплины ------------------------------------------------------- */
.gr-disziplinen {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: .6rem;
}
.gr-disziplin a {
	display: flex;
	align-items: center;
	gap: .6rem;
	background: var( --gr-grund-1 );
	border: 1px solid var( --gr-kante );
	padding: .65rem .8rem;
	text-decoration: none;
	color: var( --gr-text );
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 9px ), calc( 100% - 9px ) 100%, 0 100% );
	transition: border-color var( --gr-schnell ) ease, background var( --gr-schnell ) ease;
	min-width: 0;
}
.gr-disziplin a:hover { background: var( --gr-grund-2 ); border-color: var( --gr-violett ); }
.gr-disziplin-zeichen {
	font-family: var( --gr-schrift-zahl );
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var( --gr-violett );
	background: var( --gr-grund-0 );
	border: 1px solid var( --gr-kante );
	padding: .2rem .4rem;
	flex: 0 0 auto;
}
.gr-disziplin-name {
	font-weight: 600;
	font-size: .9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gr-disziplinen--flach { margin-top: 1.5rem; }

/* --- 8. Нумерованная лента гайдов ---------------------------------------- */
.gr-doppel { display: grid; gap: var( --gr-luft ); }

.gr-reihe { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.gr-reihe-glied {
	display: flex;
	gap: .9rem;
	align-items: baseline;
	padding: .7rem 0;
	border-bottom: 1px solid var( --gr-kante );
}
.gr-reihe-nr {
	font-family: var( --gr-schrift-zahl );
	font-size: .95rem;
	font-weight: 700;
	color: var( --gr-text-3 );
	flex: 0 0 auto;
}
.gr-reihe-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gr-reihe-text a { color: var( --gr-text ); text-decoration: none; font-weight: 600; }
.gr-reihe-text a:hover { color: var( --gr-signal ); }
.gr-reihe-dauer { font-size: .78rem; color: var( --gr-text-3 ); }

/* --- 9. Статья ----------------------------------------------------------- */
.gr-krumen { padding-block: 1rem .25rem; font-size: .8rem; }
.gr-krumen-liste {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .3rem .5rem;
	color: var( --gr-text-3 );
}
.gr-krumen-glied + .gr-krumen-glied::before { content: "/ "; color: var( --gr-kante ); }
.gr-krumen-glied a { color: var( --gr-text-2 ); text-decoration: none; }
.gr-krumen-glied a:hover { color: var( --gr-signal ); }

.gr-titelzone { padding-block: clamp( 1rem, 3vw, 2rem ) clamp( 1.5rem, 4vw, 2.5rem ); }
.gr-titelzone-titel { font-size: clamp( 1.75rem, 5.5vw, 2.75rem ); }
.gr-titelzone-text { color: var( --gr-text-2 ); max-width: 46rem; }

.gr-artikel-zone { padding-block: clamp( 1rem, 3vw, 1.75rem ) 1.25rem; }
.gr-artikel-titel { font-size: clamp( 1.8rem, 6vw, 3rem ); }
.gr-artikel-vorspann {
	font-size: clamp( 1.05rem, 2.6vw, 1.25rem );
	color: var( --gr-text-2 );
	border-left: 3px solid var( --gr-signal );
	padding-left: 1rem;
}

.gr-angaben {
	display: flex; flex-wrap: wrap; gap: .5rem .9rem;
	align-items: center;
	font-size: .82rem;
	color: var( --gr-text-3 );
	margin: 0;
}
.gr-angaben a { color: var( --gr-text-2 ); }

.gr-artikel-bild {
	margin: 0 auto clamp( 1.5rem, 4vw, 2.5rem );
	max-width: var( --gr-breite );
	padding-inline: var( --gr-rand );
}
.gr-artikel-bild--schmal { max-width: calc( var( --gr-schmal ) + 2 * var( --gr-rand ) ); }
.gr-artikel-bild .gr-bild { aspect-ratio: 16 / 9; }
.gr-bildtext { font-size: .8rem; color: var( --gr-text-3 ); margin-top: .5rem; }

.gr-artikel-text { font-size: 1.06rem; }
.gr-artikel-text > * + * { margin-top: 1.1em; }
.gr-artikel-text h2 { font-size: clamp( 1.35rem, 3.6vw, 1.85rem ); margin-top: 2em; }
.gr-artikel-text h3 { font-size: clamp( 1.15rem, 3vw, 1.4rem ); margin-top: 1.6em; }
.gr-artikel-text img,
.gr-artikel-text figure img { aspect-ratio: 16 / 9; object-fit: cover; }
.gr-artikel-text figure { margin: 1.6em 0; }
.gr-artikel-text figcaption { font-size: .82rem; color: var( --gr-text-3 ); margin-top: .5rem; }
.gr-artikel-text blockquote {
	margin: 1.6em 0;
	padding: .2rem 0 .2rem 1.1rem;
	border-left: 3px solid var( --gr-violett );
	color: var( --gr-text-2 );
	font-size: 1.1rem;
}
.gr-artikel-text table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gr-artikel-text table th,
.gr-artikel-text table td { border: 1px solid var( --gr-kante ); padding: .5rem .65rem; text-align: left; }
.gr-artikel-text table th { background: var( --gr-grund-1 ); }
/* Таблицы и код — единственное, чему разрешено скроллиться по горизонтали,
   и только внутри собственной обёртки. */
.gr-artikel-text .wp-block-table,
.gr-artikel-text pre { overflow-x: auto; max-width: 100%; }
.gr-artikel-text pre {
	background: var( --gr-grund-1 );
	border: 1px solid var( --gr-kante );
	padding: 1rem;
	font-family: var( --gr-schrift-zahl );
	font-size: .88rem;
}
.gr-artikel-text code { font-family: var( --gr-schrift-zahl ); font-size: .9em; }

.gr-verfasser {
	margin-top: clamp( 2rem, 5vw, 3rem );
	background: var( --gr-grund-1 );
	border: 1px solid var( --gr-kante );
	padding: clamp( 1rem, 3vw, 1.5rem );
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - var( --gr-schnitt ) ), calc( 100% - var( --gr-schnitt ) ) 100%, 0 100% );
}
.gr-verfasser-titel { font-size: 1.05rem; }
.gr-verfasser-text { color: var( --gr-text-2 ); font-size: .95rem; }

.gr-schlagwoerter { margin-top: 1.5rem; font-size: .85rem; color: var( --gr-text-3 ); display: flex; flex-wrap: wrap; gap: .4rem; }
.gr-schlagwoerter a {
	background: var( --gr-grund-1 );
	border: 1px solid var( --gr-kante );
	color: var( --gr-text-2 );
	padding: .2rem .55rem;
	text-decoration: none;
	font-size: .8rem;
}
.gr-schlagwoerter a:hover { border-color: var( --gr-signal ); color: var( --gr-signal ); }

.gr-seitenfolge { margin-top: 1.5rem; font-size: .9rem; color: var( --gr-text-2 ); }

/* --- 10. Пустые состояния и пагинация ------------------------------------ */
.gr-leer {
	text-align: center;
	padding: clamp( 2rem, 7vw, 4rem ) 1rem;
	background: var( --gr-grund-1 );
	border: 1px dashed var( --gr-kante );
}
.gr-leer--gross { margin-block: clamp( 1.5rem, 5vw, 3rem ); }
.gr-leer-titel { font-size: clamp( 1.3rem, 4vw, 1.9rem ); }
.gr-leer-text { color: var( --gr-text-2 ); max-width: 34rem; margin-inline: auto; }
.gr-leer .gr-suche { justify-content: center; margin-inline: auto; }
.gr-leer .gr-disziplinen { max-width: 32rem; margin-inline: auto; text-align: left; }

.gr-blaetterung { margin-top: clamp( 2rem, 5vw, 3rem ); }
.gr-blaetterung .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.gr-blaetterung .page-numbers {
	display: inline-flex;
	align-items: center; justify-content: center;
	min-width: 2.4rem; height: 2.4rem;
	padding-inline: .6rem;
	background: var( --gr-grund-1 );
	border: 1px solid var( --gr-kante );
	color: var( --gr-text-2 );
	text-decoration: none;
	font-size: .9rem; font-weight: 600;
}
.gr-blaetterung .page-numbers:hover { border-color: var( --gr-signal ); color: var( --gr-signal ); }
.gr-blaetterung .page-numbers.current { background: var( --gr-signal ); border-color: var( --gr-signal ); color: var( --gr-signal-tief ); }

/* --- 11. Подвал ---------------------------------------------------------- */
.gr-fuss {
	background: var( --gr-grund-1 );
	border-top: 1px solid var( --gr-kante );
	padding-block: clamp( 2rem, 5vw, 3.5rem ) 1.5rem;
	/* margin-top здесь нет специально: у .gr-hauptteil уже есть padding-bottom,
	   и вдвоём они давали перед подвалом полосу пустоты в два экрана на
	   малоконтентных страницах. */
	font-size: .92rem;
}
.gr-fuss-raster { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.gr-fuss-titel {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --gr-text-3 );
	margin-bottom: .7rem;
}
.gr-fuss-liste, .gr-fuss-zusatz { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.gr-fuss-liste a, .gr-fuss-zusatz a { color: var( --gr-text-2 ); text-decoration: none; }
.gr-fuss-liste a:hover, .gr-fuss-zusatz a:hover { color: var( --gr-signal ); }
.gr-fuss-text { color: var( --gr-text-2 ); max-width: 30rem; margin-top: .6rem; }
.gr-marke-wort--fuss { font-size: 1.2rem; }
.gr-fuss-zusatz {
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: 1rem;
	margin-top: 1.5rem;
	overflow-x: auto;
}
.gr-fuss-recht {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var( --gr-kante );
	color: var( --gr-text-3 );
	font-size: .8rem;
}

/* --- 12. Адаптив ---------------------------------------------------------
   Мобильная раскладка — основа выше; здесь только расширения. Брейкпойнты в rem,
   чтобы они следовали за системным размером шрифта пользователя. */

@media ( min-width: 34rem ) {   /* ~544px */
	.gr-raster--drei,
	.gr-raster--vier { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.gr-disziplinen { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.gr-fuss-raster { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.gr-karte--quer .gr-karte-tor { max-width: 11rem; }
}

@media ( min-width: 48rem ) {   /* ~768px */
	.gr-held-inhalt { grid-template-columns: minmax( 0, 1.65fr ) minmax( 0, 1fr ); align-items: start; }

	/* На широком экране текст главной карточки ложится прямо на кадр: так первый
	   экран занимает одну высоту вместо двух, а заголовок оказывается над
	   изображением, а не под ним. На узких экранах это неприемлемо — там текст
	   съел бы кадр целиком, поэтому приём живёт только здесь. */
	.gr-held .gr-karte--gross { position: relative; }
	.gr-held .gr-karte--gross .gr-karte-text {
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		padding: clamp( 1rem, 2.5vw, 1.9rem );
		background: linear-gradient( 180deg, transparent, rgba( 11, 14, 21, .72 ) 38%, rgba( 11, 14, 21, .96 ) );
		clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - var( --gr-schnitt ) ), calc( 100% - var( --gr-schnitt ) ) 100%, 0 100% );
		pointer-events: none;   /* клик по панели должен доставаться ссылке-обложке под ней */
	}
	.gr-held .gr-karte--gross .gr-karte-text a { pointer-events: auto; }
	.gr-doppel { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); gap: clamp( 2rem, 4vw, 3rem ); }
	.gr-disziplinen { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.gr-karte--quer .gr-karte-anriss { display: block; }
	.gr-karte--quer .gr-marker { display: inline-block; }
	.gr-fuss-raster { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
	.gr-fuss-spalte--breit { grid-column: auto; }
}

@media ( min-width: 62rem ) {   /* ~992px — десктопная шапка */
	.gr-schalter { display: none; }

	.gr-navigation {
		display: flex !important;   /* перебивает data-offen из скрипта при ресайзе */
		align-items: center;
		gap: 1.25rem;
		position: static;
		background: none;
		border: 0;
		padding: 0;
		max-height: none;
		overflow: visible;
	}
	.gr-menue { display: flex; gap: 1.25rem; }
	.gr-menue li { border: 0; position: relative; }
	.gr-menue a { padding: 1.25rem 0; font-size: .85rem; }
	/* Подсветка активного пункта снизу — вместо смены цвета фона всей ячейки. */
	.gr-menue > li > a::after {
		content: "";
		display: block;
		height: 2px;
		margin-top: .3rem;
		background: var( --gr-signal );
		transform: scaleX( 0 );
		transform-origin: left;
		transition: transform var( --gr-schnell ) ease;
	}
	.gr-menue > li > a:hover::after,
	.gr-menue > .current-menu-item > a::after,
	.gr-menue > .gr-menue-punkt--aktiv > a::after { transform: scaleX( 1 ); }

	.gr-menue .sub-menu {
		display: none;
		position: absolute;
		top: 100%; left: 0;
		min-width: 12rem;
		background: var( --gr-grund-1 );
		border: 1px solid var( --gr-kante );
		padding: .4rem 0;
		z-index: 30;
	}
	.gr-menue li:hover > .sub-menu,
	.gr-menue li:focus-within > .sub-menu { display: block; }
	.gr-menue .sub-menu a { padding: .45rem .8rem; }

	.gr-suche { margin-top: 0; width: 17rem; }
	.gr-suchknopf { display: none; }   /* Enter достаточно, кнопка ест ширину шапки */

	.gr-raster--drei { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.gr-raster--vier { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.gr-raster--eins { grid-template-columns: minmax( 0, 1fr ); }
}

@media ( min-width: 75rem ) {
	.gr-karte-titel { font-size: 1.18rem; }
}

/* Печать: тёмный фон на бумаге — это залитый тонером лист. */
@media print {
	body { background: #fff; color: #000; }
	.gr-leiste, .gr-fuss, .gr-sprung, .gr-blaetterung, .gr-suche { display: none; }
	.gr-artikel-text { font-size: 11pt; }
}

/* --- Плитки дисциплин с кадром -------------------------------------------
   Кадр лежит фоном, название читается поверх. Соотношение задано заранее,
   поэтому подстановка картинки не двигает вёрстку — CLS остаётся 0. */
.gr-disziplin--bild a {
	position: relative;
	display: block;
	padding: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
}
.gr-disziplin-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Кадры сами по себе тёмные, но названия должны читаться на любом. */
	filter: brightness(.72) saturate(.9);
	transition: transform .35s ease, filter .35s ease;
}
.gr-disziplin--bild a:hover .gr-disziplin-bild { transform: scale(1.04); filter: brightness(.85) saturate(1); }
.gr-disziplin--bild .gr-disziplin-name {
	position: absolute;
	left: .7rem;
	bottom: .6rem;
	right: .7rem;
	z-index: 1;
	font-weight: 700;
	text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
/* Затемнение снизу, чтобы подпись не спорила со светлыми участками кадра. */
.gr-disziplin--bild a::after {
	content: "";
	position: absolute;
	inset: 40% 0 0 0;
	background: linear-gradient(to bottom, transparent, rgba(11,14,21,.85));
}