/*
Theme Name:   Checkplayer
Theme URI:    https://checkplayer.de
Description:  Child-Theme für GeneratePress – Checkplayer-Design (Magenta/Lila, dunkel), selbst gehostete Schriften, Muster für Download-Seiten.
Author:       Checkplayer
Template:     generatepress
Version:      1.0.6
Requires at least: 6.4
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  checkplayer
*/

/* ── Schriften: lokal ausgeliefert (kein Google-Fonts-Abruf → DSGVO) ─────────────────────── */

@font-face {
	font-family: "Big Shoulders";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/big-shoulders-display.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Next";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/atkinson-next-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Atkinson Next";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/atkinson-next-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/plex-mono-400.woff2") format("woff2");
}

@font-face {
	font-family: "Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/plex-mono-500.woff2") format("woff2");
}

/* ── Design-Tokens (gleiche Farbwelt wie die Checktv-App und -Extension) ─────────────────────
   Die GeneratePress-Farben (--contrast, --base, --accent …) setzt functions.php als Standard –
   im Customizer bleiben sie änderbar. Hier nur, was GeneratePress nicht kennt. */

:root {
	--cp-ink-950: #09060f;
	--cp-ink-900: #0e0a16;
	--cp-ink-850: #140e1f;
	--cp-ink-800: #1a1328;
	--cp-ink-700: #2c2141;
	--cp-ink-600: #3c2e57;
	--cp-ink-400: #7e6f9e;
	--cp-ink-300: #aa9dc6;
	--cp-paper: #f0eaf8;
	--cp-paper-dim: #cbc1dd;
	--cp-accent: #ff3ec8;
	--cp-accent-soft: rgba(255, 62, 200, 0.14);
	--cp-violet: #9b6bff;
	--cp-tally: #ff3b47;
	--cp-gradient: linear-gradient(135deg, #ff5fd2 0%, #ff3ec8 45%, #9b6bff 100%);

	--cp-font-display: "Big Shoulders", "Arial Narrow", sans-serif;
	--cp-font-sans: "Atkinson Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--cp-font-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--cp-radius: 14px;
	--cp-radius-lg: 22px;
	--cp-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.8);
	--cp-glow: 0 10px 36px -10px rgba(255, 62, 200, 0.55);
}

/* ── Grundlage ───────────────────────────────────────────────────────────────────────────── */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--cp-ink-950);
	background-image:
		radial-gradient(1100px 600px at 0% -10%, rgba(155, 107, 255, 0.18), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(255, 62, 200, 0.10), transparent 60%);
	background-repeat: no-repeat;
	color: var(--cp-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
	font-family: var(--cp-font-sans);
}

body {
	font-size: 17px;
	line-height: 1.65;
}

::selection {
	background: var(--cp-accent);
	color: var(--cp-ink-950);
}

:focus-visible {
	outline: 3px solid var(--cp-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

h1,
h2,
h3,
h4,
.entry-title,
.page-title {
	font-family: var(--cp-font-display);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--cp-paper);
}

h1,
.entry-title {
	font-size: clamp(2.6rem, 6vw, 4.6rem);
}

h2 {
	font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}

h4 {
	font-size: 1.25rem;
}

h5,
h6 {
	font-family: var(--cp-font-mono);
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cp-ink-300);
}

code,
kbd,
pre,
samp {
	font-family: var(--cp-font-mono);
	font-size: 0.92em;
}

:not(pre) > code {
	background: var(--cp-ink-800);
	border: 1px solid var(--cp-ink-700);
	border-radius: 6px;
	padding: 0.1em 0.4em;
}

pre {
	background: var(--cp-ink-900);
	border: 1px solid var(--cp-ink-700);
	border-radius: var(--cp-radius);
	color: var(--cp-paper-dim);
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--cp-ink-700);
	opacity: 1;
}

blockquote {
	border-left: 3px solid var(--cp-accent);
	background: var(--cp-ink-850);
	border-radius: 0 var(--cp-radius) var(--cp-radius) 0;
	font-style: normal;
	color: var(--cp-paper-dim);
}

img {
	border-radius: 0;
}

.entry-content img,
.wp-block-image img {
	border-radius: var(--cp-radius);
}

/* ── Kopfbereich ─────────────────────────────────────────────────────────────────────────── */

.site-header {
	background: rgba(9, 6, 15, 0.82);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.inside-header {
	padding-top: 14px;
	padding-bottom: 14px;
}

.main-title {
	font-family: var(--cp-font-display);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.main-title a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--cp-paper);
	text-decoration: none;
}

/* Logo-Kachel „C" ohne Bilddatei – wird ausgeblendet, sobald ein eigenes Logo gesetzt ist. */
.main-title a::before {
	content: "C";
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--cp-gradient);
	color: var(--cp-ink-950);
	font-size: 28px;
	line-height: 1;
	padding-top: 2px;
	box-shadow: var(--cp-glow);
}

.site-logo + .site-branding .main-title a::before,
.site-header .site-logo ~ * .main-title a::before {
	display: none;
}

.site-description {
	font-family: var(--cp-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cp-ink-400);
	margin-top: 6px;
}

/* ── Navigation ──────────────────────────────────────────────────────────────────────────── */

.main-navigation,
.main-navigation ul ul {
	background: transparent;
}

.main-navigation .main-nav ul li a {
	font-weight: 600;
	font-size: 15px;
	color: var(--cp-paper-dim);
	border-radius: 999px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--cp-paper);
	background-color: var(--cp-accent-soft);
}

.main-navigation .main-nav ul ul {
	background: var(--cp-ink-850);
	border: 1px solid var(--cp-ink-700);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	padding: 6px;
}

/* Menüpunkt mit CSS-Klasse „cp-nav-cta" (Menüs → CSS-Klassen) wird zum Knopf. */
.main-navigation .main-nav ul li.cp-nav-cta > a {
	background: var(--cp-gradient);
	color: var(--cp-ink-950);
	font-weight: 800;
	margin-left: 8px;
	line-height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	box-shadow: var(--cp-glow);
}

.main-navigation .main-nav ul li.cp-nav-cta:hover > a {
	color: var(--cp-ink-950);
	filter: brightness(1.08);
}

.menu-toggle,
.main-navigation .menu-toggle {
	color: var(--cp-paper);
	background: transparent;
}

.main-navigation.toggled .main-nav > ul {
	background: var(--cp-ink-900);
	border-top: 1px solid var(--cp-ink-700);
}

/* ── Inhalt ──────────────────────────────────────────────────────────────────────────────── */

.separate-containers .inside-article,
.one-container .site-content,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.inside-page-header {
	background-color: transparent;
}

.separate-containers .inside-article {
	background: var(--cp-ink-900);
	border: 1px solid var(--cp-ink-700);
	border-radius: var(--cp-radius-lg);
}

.entry-meta,
.entry-meta a,
.cat-links,
.tags-links,
.comments-link {
	font-family: var(--cp-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-ink-400);
}

.entry-content > * + * {
	margin-top: 0;
}

.entry-content a:not(.wp-block-button__link):not(.button) {
	color: var(--cp-accent);
}

.entry-content a:not(.wp-block-button__link):not(.button):hover {
	color: var(--cp-paper);
}

/* Lesebreite für Fließtext, Blöcke dürfen breiter sein. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: 72ch;
}

.entry-content > .has-text-align-center,
.entry-content > p.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

/* ── Knöpfe ──────────────────────────────────────────────────────────────────────────────── */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
.wp-block-button .wp-block-button__link:not(.has-background),
.wp-element-button:not(.has-background) {
	background: var(--cp-gradient);
	color: var(--cp-ink-950);
	border: 0;
	border-radius: 999px;
	font-family: var(--cp-font-sans);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.2;
	padding: 15px 28px;
	text-decoration: none;
	box-shadow: var(--cp-glow);
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
.wp-block-button .wp-block-button__link:not(.has-background):hover,
.wp-element-button:not(.has-background):hover,
button:focus,
a.button:focus,
.wp-block-button .wp-block-button__link:not(.has-background):focus {
	background: var(--cp-gradient);
	color: var(--cp-ink-950);
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--cp-paper);
	border: 1.5px solid var(--cp-ink-600);
	box-shadow: none;
	padding: 13.5px 26.5px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background: var(--cp-accent-soft);
	border-color: var(--cp-accent);
	color: var(--cp-paper);
}

.menu-toggle,
.main-navigation .menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
	box-shadow: none;
	transform: none;
	filter: none;
	padding: 0 20px;
}

/* ── Formulare ───────────────────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: var(--cp-ink-900);
	color: var(--cp-paper);
	border: 1px solid var(--cp-ink-700);
	border-radius: 12px;
	padding: 12px 16px;
}

input:focus,
textarea:focus,
select:focus {
	background: var(--cp-ink-850);
	color: var(--cp-paper);
	border-color: var(--cp-accent);
}

::placeholder {
	color: var(--cp-ink-400);
	opacity: 1;
}

/* ── Fußbereich ──────────────────────────────────────────────────────────────────────────── */

.site-footer,
.site-info,
.footer-widgets {
	background: transparent;
	color: var(--cp-ink-300);
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 14px;
}

.site-info a,
.footer-widgets a {
	color: var(--cp-paper-dim);
}

.site-info a:hover,
.footer-widgets a:hover {
	color: var(--cp-accent);
}

/* ── Bausteine für Seiten (über die Block-Muster „Checkplayer" einfügbar) ───────────────── */

/* Kleine Überschrift über Titeln, z. B. „FÜR FIRE TV & BROWSER" */
.cp-kicker {
	font-family: var(--cp-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cp-accent);
	margin-bottom: 14px;
}

.cp-lead {
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	line-height: 1.55;
	color: var(--cp-paper-dim);
}

.cp-muted {
	color: var(--cp-ink-400);
	font-size: 14px;
}

.cp-gradient-text {
	background: var(--cp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Großer Einstieg oben auf der Startseite */
.cp-hero {
	position: relative;
	padding: clamp(48px, 9vw, 110px) clamp(22px, 5vw, 64px);
	border-radius: var(--cp-radius-lg);
	background:
		radial-gradient(800px 380px at 15% 0%, rgba(255, 62, 200, 0.22), transparent 65%),
		radial-gradient(700px 400px at 100% 100%, rgba(155, 107, 255, 0.22), transparent 60%),
		var(--cp-ink-900);
	border: 1px solid var(--cp-ink-700);
	overflow: hidden;
	margin-bottom: clamp(32px, 6vw, 72px);
}

.cp-hero h1 {
	font-size: clamp(3rem, 8vw, 6.2rem);
	margin-bottom: 18px;
}

.cp-hero .cp-lead {
	max-width: 46ch;
}

.cp-hero .wp-block-buttons {
	margin-top: 30px;
	gap: 14px;
}

/* Einstieg auf Unterseiten (Fire TV Stick, Extension): etwas kleinerer Titel */
.cp-hero.cp-hero-page h1 {
	font-size: clamp(2.6rem, 6.4vw, 4.8rem);
}

.cp-hero .cp-meta {
	margin-top: 18px;
	margin-bottom: 0;
}

/* Karten (Funktionen, Downloads) */
.cp-card {
	height: 100%;
	padding: 28px;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-ink-900);
	border: 1px solid var(--cp-ink-700);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.cp-card:hover {
	border-color: rgba(255, 62, 200, 0.45);
	transform: translateY(-2px);
}

.cp-card h3 {
	margin-bottom: 10px;
}

.cp-card p {
	color: var(--cp-paper-dim);
	margin-bottom: 0;
}

.cp-card .cp-kicker {
	margin-bottom: 8px;
}

.cp-card ul {
	margin: 0 0 0 1.1em;
	color: var(--cp-paper-dim);
}

.cp-card li + li {
	margin-top: 6px;
}

.wp-block-columns.cp-grid {
	gap: 20px;
	margin-bottom: clamp(32px, 6vw, 72px);
}

/* Rückfall, falls das Spalten-CSS von WordPress fehlt: Karten trotzdem nebeneinander. */
.wp-block-columns.cp-grid {
	display: flex;
	flex-wrap: wrap;
}

.wp-block-columns.cp-grid > .wp-block-column {
	flex: 1 1 260px;
	min-width: 0;
}

/* GeneratePress gibt jedem Gruppen-Innencontainer 40px Innenabstand – die Bausteine haben
   ihren eigenen, sonst wären Kästen doppelt gepolstert. Letzter Absatz ohne Abstand nach unten. */
.site-main .cp-hero > .wp-block-group__inner-container,
.site-main .cp-card > .wp-block-group__inner-container,
.site-main .cp-download > .wp-block-group__inner-container,
.site-main .cp-note > .wp-block-group__inner-container {
	padding: 0;
}

.cp-hero > .wp-block-group__inner-container > :last-child,
.cp-card > .wp-block-group__inner-container > :last-child,
.cp-download > .wp-block-group__inner-container > :last-child,
.cp-note > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* Download-Kästen nebeneinander gleich hoch, Abstand nach unten macht das Raster. */
.cp-grid .cp-download {
	height: 100%;
	margin-bottom: 0;
}

/* Hinweiszeile direkt unter Knöpfen nicht ankleben lassen. */
.wp-block-buttons + .cp-muted,
.wp-block-buttons + p {
	margin-top: 16px;
}

/* Nummerierte Schritte (z. B. Fire-TV-Installation) */
ol.cp-steps {
	list-style: none;
	counter-reset: cp-step;
	margin: 0 0 clamp(32px, 6vw, 72px);
	padding: 0;
	display: grid;
	gap: 14px;
	max-width: none;
}

ol.cp-steps > li {
	counter-increment: cp-step;
	position: relative;
	padding: 20px 22px 20px 78px;
	border-radius: var(--cp-radius);
	background: var(--cp-ink-900);
	border: 1px solid var(--cp-ink-700);
	color: var(--cp-paper-dim);
}

ol.cp-steps > li::before {
	content: counter(cp-step, decimal-leading-zero);
	position: absolute;
	left: 22px;
	top: 18px;
	font-family: var(--cp-font-display);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	color: var(--cp-accent);
}

ol.cp-steps > li strong {
	color: var(--cp-paper);
}

/* Einstieg auf Unterseiten mit Gerätebild: Text links, Bild rechts (mobil darunter). */
.cp-hero-page > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	column-gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.cp-hero-page > .wp-block-group__inner-container > * {
	grid-column: 1;
}

.cp-hero-page > .wp-block-group__inner-container > .cp-hero-shot {
	grid-column: 2;
	grid-row: 1 / span 6;
	margin: 0;
}

.cp-hero.cp-hero-page h1 {
	font-size: clamp(2.4rem, 4.6vw, 4.2rem);
}

.entry-content .cp-hero-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* „Das brauchst du": Chips mit Häkchen */
ul.cp-checks {
	list-style: none;
	margin: 0 0 clamp(36px, 6vw, 72px);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: none;
}

ul.cp-checks > li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 18px 10px 12px;
	border-radius: 999px;
	background: var(--cp-ink-900);
	border: 1px solid var(--cp-ink-700);
	color: var(--cp-paper-dim);
	font-size: 15px;
	line-height: 1.3;
}

ul.cp-checks > li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309060f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat,
		var(--cp-gradient);
}

/* Schritt-Karten mit Bild – gerade Schritte gespiegelt */
.cp-step {
	margin-bottom: 20px;
	padding: clamp(20px, 3vw, 36px);
	border-radius: var(--cp-radius-lg);
	background: var(--cp-ink-900);
	border: 1px solid var(--cp-ink-700);
}

.site-main .cp-step > .wp-block-group__inner-container {
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: clamp(24px, 4vw, 52px);
	align-items: center;
}

.cp-step > .wp-block-group__inner-container > * {
	grid-column: 1;
}

.cp-step > .wp-block-group__inner-container > .cp-shot {
	grid-column: 2;
	grid-row: 1 / span 3;
	margin: 0;
}

.site-main .cp-step-flip > .wp-block-group__inner-container {
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.cp-step-flip > .wp-block-group__inner-container > * {
	grid-column: 2;
}

.cp-step-flip > .wp-block-group__inner-container > .cp-shot {
	grid-column: 1;
}

.cp-step-num {
	margin-bottom: 8px;
	font-family: var(--cp-font-display);
	font-weight: 800;
	font-size: clamp(3rem, 6vw, 4.6rem);
	line-height: 0.9;
	background: var(--cp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cp-step h3 {
	margin-bottom: 12px;
}

.cp-step-text {
	margin-bottom: 0;
	color: var(--cp-paper-dim);
}

.cp-step-text strong {
	color: var(--cp-paper);
}

.entry-content .cp-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cp-radius);
	border: 1px solid var(--cp-ink-700);
	box-shadow: var(--cp-shadow);
}

.entry-content .cp-shot a {
	display: block;
	cursor: zoom-in;
}

.entry-content .cp-shot a:hover img {
	border-color: rgba(255, 62, 200, 0.55);
}

.cp-shot-tv img {
	aspect-ratio: 16 / 9;
}

.cp-shot-web img {
	aspect-ratio: 16 / 10;
}

.cp-step + .cp-grid,
.cp-step + .cp-note {
	margin-top: clamp(32px, 6vw, 72px);
}

@media (max-width: 860px) {
	.cp-hero-page > .wp-block-group__inner-container,
	.site-main .cp-step > .wp-block-group__inner-container,
	.site-main .cp-step-flip > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.cp-hero-page > .wp-block-group__inner-container > .cp-hero-shot,
	.cp-step > .wp-block-group__inner-container > .cp-shot,
	.cp-step-flip > .wp-block-group__inner-container > * {
		grid-column: 1;
		grid-row: auto;
	}

	.cp-hero-page > .wp-block-group__inner-container > .cp-hero-shot {
		margin-top: 28px;
	}

	.cp-step > .wp-block-group__inner-container > .cp-shot {
		margin-top: 20px;
	}
}

/* Download-Kasten; .cp-meta = Versionszeile in Mono-Schrift */
.cp-download {
	padding: clamp(24px, 4vw, 40px);
	border-radius: var(--cp-radius-lg);
	background:
		radial-gradient(500px 220px at 100% 0%, rgba(255, 62, 200, 0.16), transparent 70%),
		var(--cp-ink-900);
	border: 1px solid rgba(255, 62, 200, 0.35);
	margin-bottom: clamp(32px, 6vw, 72px);
}

.cp-meta {
	font-family: var(--cp-font-mono);
	font-size: 13px;
	color: var(--cp-ink-300);
	letter-spacing: 0.04em;
}

/* Kleines Etikett, z. B. „NEU" oder „BETA" */
.cp-badge {
	display: inline-block;
	font-family: var(--cp-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cp-accent);
	border: 1px solid rgba(255, 62, 200, 0.5);
	border-radius: 6px;
	padding: 2px 8px;
}

/* Hinweiskasten (rechtliche Hinweise, Systemvoraussetzungen) */
.cp-note {
	margin-bottom: 16px;
	padding: 18px 22px;
	border-radius: var(--cp-radius);
	background: var(--cp-ink-850);
	border: 1px solid var(--cp-ink-700);
	color: var(--cp-paper-dim);
	font-size: 15px;
}

/* ── Barrierefreiheit & Bewegung ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 16px;
	}

	.main-title {
		font-size: 26px;
	}

	.main-title a::before {
		width: 32px;
		height: 32px;
		font-size: 24px;
	}

	.cp-card {
		padding: 22px;
	}

	ol.cp-steps > li {
		padding-left: 64px;
	}

	ol.cp-steps > li::before {
		left: 18px;
		font-size: 26px;
	}
}