/*
Theme Name: cogixo
Theme URI: https://cogixo.de
Author: Thorsten Siemeister
Author URI: https://cogixo.de
Description: Block-Theme für cogixo, die Apps von Thorsten Siemeister. Nutzt ausschließlich Core-Blöcke und ist vollständig im Website-Editor bearbeitbar.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cogixo
Tags: block-patterns, full-site-editing, custom-colors, editor-style, one-column, wide-blocks

Schriften: Sen (Copyright 2023 The Sen Project Authors, https://github.com/philatype/Sen/)
und DM Sans (Copyright 2014 The DM Sans Project Authors, https://github.com/googlefonts/dm-fonts),
beide unter der SIL Open Font License 1.1, Lizenztexte unter assets/fonts/.
*/

/* ---------- Farben und dunkler Modus ---------- */

:root {
	color-scheme: light;
	--cogixo-border-control: #85819A;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--ground: #15142A;
	--wp--preset--color--surface: #1F1D3A;
	--wp--preset--color--surface-sunk: #2A2848;
	--wp--preset--color--ink: #F6F4EF;
	--wp--preset--color--ink-muted: #C9C6D8;
	--wp--preset--color--ink-subtle: #A19EB5;
	--wp--preset--color--line: #34314F;
	--wp--preset--color--line-strong: #5A5778;
	--wp--preset--color--accent-text: #FF8A63;
	--cogixo-border-control: #7A7799;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not(:has(.editor-styles-wrapper)) {
		color-scheme: dark;
		--wp--preset--color--ground: #15142A;
		--wp--preset--color--surface: #1F1D3A;
		--wp--preset--color--surface-sunk: #2A2848;
		--wp--preset--color--ink: #F6F4EF;
		--wp--preset--color--ink-muted: #C9C6D8;
		--wp--preset--color--ink-subtle: #A19EB5;
		--wp--preset--color--line: #34314F;
		--wp--preset--color--line-strong: #5A5778;
		--wp--preset--color--accent-text: #FF8A63;
		--cogixo-border-control: #7A7799;
	}
}

/* Auf festen Flächen (Indigo, Koralle) bleiben Links und Buttons in den festen Farben. */
.has-indigo-background-color a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--cream); }
.has-accent-background-color a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--indigo); }
.has-accent-background-color .wp-element-button:hover,
.has-accent-background-color .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--indigo) !important;
	color: var(--wp--preset--color--cream) !important;
	text-decoration: underline;
}

/* ---------- Grundlagen ---------- */

body {
	-webkit-font-smoothing: antialiased;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-text);
	outline-offset: 2px;
}

.has-accent-background-color :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--indigo);
	outline-offset: 3px;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1.5px;
}

em {
	font-style: italic;
}

/* DM Sans ist nur in 400 und 500 eingebunden: fett heißt hier 500. */
strong,
b {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1.5px solid currentColor;
	padding-top: 12.5px;
	padding-bottom: 12.5px;
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
}

.wp-block-button.is-style-soft > .wp-block-button__link {
	min-height: 44px;
	padding: 10px 20px;
	background: var(--wp--preset--color--surface-sunk);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-soft > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
}

/* ---------- Kopfzeile ---------- */

.is-style-logo-dark {
	display: none;
}

:root[data-theme="dark"] .is-style-logo-light { display: none; }
:root[data-theme="dark"] .is-style-logo-dark { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .is-style-logo-light { display: none; }
	:root:not([data-theme="light"]) .is-style-logo-dark { display: block; }
}

.wp-block-image.is-style-logo-light,
.wp-block-image.is-style-logo-dark {
	margin: 0;
}

.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 6px;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Schalter Hell/Dunkel: runder Icon-Button. Der Text bleibt für Screenreader lesbar. */
.wp-block-button.is-style-theme-toggle > .wp-block-button__link {
	position: relative;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid var(--cogixo-border-control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	overflow: hidden;
	white-space: nowrap;
	text-indent: 200%;
	cursor: pointer;
}

.wp-block-button.is-style-theme-toggle > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 10px;
	background: currentColor;
	-webkit-mask: url("assets/icons/sonne.svg") center / contain no-repeat;
	mask: url("assets/icons/sonne.svg") center / contain no-repeat;
}

.wp-block-button.is-style-theme-toggle > .wp-block-button__link[aria-pressed="true"]::before {
	-webkit-mask-image: url("assets/icons/mond.svg");
	mask-image: url("assets/icons/mond.svg");
}

@media (max-width: 599px) {
	/* Schmale Ansicht: Logo, Menü und Schalter in einer Zeile. Kontakt steht im Inhalt jeder Seite. */
	header .wp-block-buttons > .wp-block-button:not(.is-style-theme-toggle) {
		display: none;
	}
	header .wp-block-group.alignwide {
		flex-wrap: nowrap;
	}
}

.wp-block-button.is-style-theme-toggle > .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-sunk);
	color: var(--wp--preset--color--ink);
}

/* ---------- Bahn zur Überschrift ---------- */

.wp-block-group.is-style-bahn-heading {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 16px;
	margin-top: -32px;
}

.wp-block-group.is-style-bahn-heading::before,
.wp-block-group.is-style-bahn-heading::after {
	content: "";
	order: -1;
	flex: none;
}

.wp-block-group.is-style-bahn-heading::before {
	width: 120px;
	height: 168px;
	margin-left: clamp(8px, 8vw, 128px);
	background: var(--wp--preset--color--ink);
	-webkit-mask: url("assets/images/bahn.svg") 0 0 / 100% 100% no-repeat;
	mask: url("assets/images/bahn.svg") 0 0 / 100% 100% no-repeat;
}

.wp-block-group.is-style-bahn-heading::after {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.wp-block-group.is-style-bahn-heading > * {
	margin: 40px 0 0;
	padding-bottom: 6px;
	min-width: 0;
}

:where(.wp-block-group, .wp-block-columns):has(+ .is-style-bahn-heading),
:where(.wp-block-group, .wp-block-columns):has(+ .wp-block-group > .is-style-bahn-heading:first-child) {
	position: relative;
	z-index: 1;
}

@media (max-width: 599px) {
	.wp-block-group.is-style-bahn-heading {
		gap: 10px;
	}
	.wp-block-group.is-style-bahn-heading::before {
		width: 72px;
		height: 101px;
		margin-left: 8px;
	}
	.wp-block-group.is-style-bahn-heading::after {
		width: 29px;
		height: 29px;
	}
}

/* ---------- App-Karussell ---------- */

:where(body:not(.editor-styles-wrapper)) .wp-block-group.is-style-app-carousel {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 16px;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line-strong) transparent;
}

:where(body:not(.editor-styles-wrapper)) .wp-block-group.is-style-app-carousel > .wp-block-query,
:where(body:not(.editor-styles-wrapper)) .wp-block-group.is-style-app-carousel .wp-block-post-template {
	display: contents;
}

:where(body:not(.editor-styles-wrapper)) .wp-block-group.is-style-app-carousel > * {
	margin: 0;
}

.is-style-app-carousel .wp-block-post-template > li,
.wp-block-group.is-style-app-carousel > .wp-block-group {
	flex: 0 0 min(300px, 80vw);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.is-style-app-carousel .wp-block-post-template > li {
	position: relative;
}

.is-style-app-carousel .wp-block-post-template > li > * {
	margin: 0;
}

.is-style-app-carousel .wp-block-post-featured-image,
.is-style-app-carousel .wp-block-post-featured-image img {
	border-radius: 24px;
	overflow: hidden;
}

.is-style-app-carousel .wp-block-post-featured-image {
	margin-bottom: 8px;
}

/* Ohne Beitragsbild zeigt die Karte eine leere Fläche, bis ein Screen da ist. */
.is-style-app-carousel .wp-block-post-template > li:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 1;
	border-radius: 24px;
	background: var(--wp--preset--color--surface-sunk);
	margin-bottom: 8px;
}

.is-style-app-carousel .wp-block-read-more {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 4px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-sunk);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 500;
}

.is-style-app-carousel .wp-block-read-more:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
}

.wp-block-group.is-style-next-app > :first-child {
	/* Feste Breite, damit das Seitenverhältnis 1:1 greift: so hoch wie die Bilder. */
	box-sizing: border-box;
	width: 100%;
	align-self: stretch;
	flex-shrink: 0;
	aspect-ratio: 1;
	margin: 0 0 8px;
	border: 2px dashed var(--wp--preset--color--line-strong);
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 56px;
	line-height: 1;
}

/* ---------- Grafik Idee, Code, Ergebnis ---------- */

.wp-block-group.is-style-idea-flow {
	width: 100%;
	max-width: 480px;
	aspect-ratio: 400 / 260;
	background: url("assets/images/idee-code-ergebnis.svg") center / contain no-repeat;
}

/* ---------- Bilder ---------- */

/* Alle Bilder haben die Rundung der Marke (theme.json, 20px). Logos bleiben eckig. */
.wp-block-image:where(.is-style-logo-light, .is-style-logo-dark) img {
	border-radius: 0;
}

.wp-block-media-text__media img,
.wp-block-media-text__media video {
	border-radius: 20px;
}

/* Handy-Rahmen: App-Screen im Hochformat mit hellem Rahmen, wie die Platzhalter. */
.wp-block-image.is-style-phone {
	max-width: 180px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-image.is-style-phone img {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
	border: 6px solid var(--wp--preset--color--cream);
	border-radius: 24px;
}

/* Quadratisch: Bild füllt eine quadratische Fläche, etwa in der App-Karte oder für Zifferblätter. */
.wp-block-image.is-style-square img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 24px;
}

/* Bild in der Indigo-Fläche der App-Karte: Fläche schneidet die Ecken. */
.wp-block-group.is-style-placeholder-square.has-background {
	overflow: hidden;
}

/* ---------- Kacheln und Platzhalter ---------- */

.wp-block-group.is-style-emoji-tile {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-group.is-style-emoji-tile > * {
	margin: 0;
	font-size: 28px;
	line-height: 1;
}

.wp-block-group:where(.is-style-placeholder-portrait, .is-style-placeholder-landscape, .is-style-placeholder-phone, .is-style-placeholder-square) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--wp--preset--color--surface-sunk);
	color: var(--wp--preset--color--ink-muted);
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.wp-block-group:where(.is-style-placeholder-portrait, .is-style-placeholder-landscape, .is-style-placeholder-phone, .is-style-placeholder-square) > * {
	margin: 0;
}

.wp-block-group.is-style-placeholder-portrait { aspect-ratio: 4 / 5; }
.wp-block-group.is-style-placeholder-landscape { aspect-ratio: 3 / 2; }
.wp-block-group.is-style-placeholder-square { aspect-ratio: 1; border-radius: 24px; }

.wp-block-group.is-style-placeholder-phone {
	width: 128px;
	max-width: 100%;
	aspect-ratio: 9 / 19.5;
	margin-left: auto;
	margin-right: auto;
	border-radius: 24px;
	border: 6px solid var(--wp--preset--color--cream);
	background: #2A2848;
	color: #C9C6D8;
	font-size: 11px;
}

/* ---------- Listen und Abzeichen ---------- */

.wp-block-list.is-style-chips {
	list-style: none;
	margin: 0;
	padding: 2px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wp-block-list.is-style-chips > li {
	margin: 0;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-sunk);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

p.is-style-number-badge,
p.is-style-number-badge.has-background {
	flex: none;
	padding: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--sen);
	font-weight: 800;
	font-size: 19px;
	line-height: 1;
}

/* ---------- Beitragskarte ---------- */

.wp-block-group.is-style-post-card {
	position: relative;
	height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	overflow: hidden;
}

.wp-block-group.is-style-post-card:hover {
	border-color: var(--cogixo-border-control);
}

.wp-block-group.is-style-post-card .wp-block-post-featured-image {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-group.is-style-post-card .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-group.is-style-post-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-group.is-style-post-card .wp-block-post-title a:focus-visible {
	outline: none;
}

.wp-block-group.is-style-post-card:focus-within {
	outline: 2px solid var(--wp--preset--color--accent-text);
	outline-offset: 2px;
}

/* ---------- Zeitleiste ---------- */

.wp-block-group.is-style-timeline > * {
	position: relative;
	margin: 0;
	padding: 0 0 28px 32px;
}

.wp-block-group.is-style-timeline > *::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.wp-block-group.is-style-timeline > *:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 23px;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--line-strong);
}

.wp-block-group.is-style-timeline > *:last-child {
	padding-bottom: 0;
}

/* ---------- Häufige Fragen ---------- */

.wp-block-accordion.is-style-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wp-block-accordion.is-style-cards .wp-block-accordion-item {
	margin: 0;
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	overflow: hidden;
}

.wp-block-accordion.is-style-cards .wp-block-accordion-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--sen);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.wp-block-accordion.is-style-cards .wp-block-accordion-heading__toggle {
	min-height: 56px;
	padding: 14px 20px;
}

.wp-block-accordion.is-style-cards .wp-block-accordion-panel {
	padding: 0 20px 18px;
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Zitat groß ---------- */

.wp-block-pullquote {
	text-align: left;
}

.wp-block-pullquote blockquote {
	margin: 0;
}

.wp-block-pullquote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-weight: 400;
	letter-spacing: 0;
}

/* ---------- Tabelle ---------- */

.wp-block-table :where(th, td) {
	border-color: var(--wp--preset--color--line-strong);
	padding: 10px 14px;
}

.wp-block-table thead {
	border-bottom-width: 2px;
}

/* ---------- Fußzeile ---------- */

.cogixo-footer a {
	color: var(--wp--preset--color--ink-subtle);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ==========================================================
   VOLT: eigener Look innerhalb der Vorlage „App: VOLT“.
   Alle Farben und Schriften gelten nur im Block „VOLT-Bereich“
   (Klasse app-volt). Der Rest der Seite bleibt cogixo.
   ========================================================== */

.app-volt {
	color-scheme: light;
	--wp--preset--color--ground: #F5F4F0;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--surface-sunk: #F0EEE8;
	--wp--preset--color--ink: #1A1A1A;
	--wp--preset--color--ink-muted: #4A4943;
	--wp--preset--color--ink-subtle: #6B6960;
	--wp--preset--color--line: #E8E6E0;
	--wp--preset--color--line-strong: #DDDBD4;
	--wp--preset--color--accent: #E4531F;
	--wp--preset--color--accent-text: #B8400F;
	--wp--preset--font-family--sen: Syne, system-ui, sans-serif;
	--cogixo-border-control: #8A877E;
	background: #F5F4F0;
	color: #1A1A1A;
	overflow-x: clip;
}

body:has(.app-volt) {
	background: #F5F4F0;
}

.app-volt :where(h1, h2, h3, h4) {
	letter-spacing: -0.02em;
}

.app-volt :where(h1) {
	line-height: 0.98;
	letter-spacing: -0.03em;
}

.app-volt :where(h1, h2) {
	overflow-wrap: break-word;
	hyphens: auto;
}

.app-volt :where(a, button, summary, input):focus-visible {
	outline: 3px solid #E4531F;
	outline-offset: 3px;
}

.app-volt .wp-element-button,
.app-volt .wp-block-button__link {
	border-radius: 14px;
}

/* Leiste „Zurück zu cogixo“ */
.app-volt .volt-strip > .alignwide {
	min-height: 44px;
	gap: 16px;
}

.app-volt .volt-strip p {
	margin: 0;
}

.app-volt .volt-strip .wp-block-image,
.app-volt .volt-sender .wp-block-image {
	margin: 0;
	line-height: 0;
}

.app-volt .volt-strip .wp-block-image img,
.app-volt .volt-sender .wp-block-image img {
	display: block;
}

.app-volt .volt-back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: #F6F4EF;
	text-decoration: none;
}

.app-volt .volt-back a::before {
	content: "";
	order: -2;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.app-volt .volt-back a:hover {
	text-decoration: underline;
	color: #F6F4EF;
}

.app-volt .volt-strip-note {
	color: #C9C6D8;
}

@media (max-width: 599px) {
	.app-volt .volt-strip-note {
		display: none;
	}
}

/* Kopfzeile VOLT */
.app-volt .volt-logo-icon {
	margin: 0;
}

.app-volt .volt-logo-icon img {
	border-radius: 0;
}

.app-volt .volt-logo-text {
	margin: 0;
	font-family: Syne, system-ui, sans-serif;
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -0.02em;
	line-height: 1;
}

.app-volt .volt-logo-text a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #1A1A1A;
	text-decoration: none;
}

.app-volt .volt-header .wp-block-navigation {
	font-size: 15px;
	font-weight: 500;
}

.app-volt .volt-header-cta .wp-block-button__link {
	min-height: 44px;
	padding: 11px 18px;
	border-radius: 12px;
	font-size: 15px;
	background: #1A1A1A;
	color: #FFFFFF;
}

/* Fußzeile VOLT */
.app-volt .volt-sender img {
	border-radius: 0;
}

.app-volt .volt-sender p img {
	display: block;
	height: auto;
}

.app-volt .volt-sender p {
	margin: 0;
	line-height: 1;
}

.app-volt .volt-sender .wp-block-image {
	margin: 0;
}

.app-volt .volt-sender a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	color: #6B6960;
	text-decoration: none;
}

.app-volt .volt-sender a:hover {
	text-decoration: underline;
}

.app-volt .volt-footer .wp-block-navigation a {
	color: #6B6960;
	text-decoration: underline;
}

/* Linie unter der Überschrift */
.wp-block-separator.is-style-volt-rule {
	border: 0;
	border-top: 3px solid #1A1A1A;
	max-width: 560px;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	opacity: 1;
}

/* Knopf mit hartem Schatten */
.wp-block-button.is-style-volt-pop > .wp-block-button__link {
	gap: 12px;
	min-height: 58px;
	padding: 0 26px;
	border: 2px solid #1A1A1A;
	border-radius: 14px;
	background: #E4531F;
	color: #1A1A1A;
	box-shadow: 3px 3px 0 #1A1A1A;
	font-family: Syne, system-ui, sans-serif;
	font-weight: 800;
	font-size: 19px;
	line-height: 1.15;
	transition: transform 0.15s, box-shadow 0.15s;
}

.wp-block-button.is-style-volt-pop > .wp-block-button__link::before,
.wp-block-button.is-style-volt-dark-button > .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	clip-path: polygon(25% 15%, 85% 50%, 25% 85%);
}

.wp-block-button.is-style-volt-pop > .wp-block-button__link:hover {
	background: #E4531F;
	color: #1A1A1A;
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 #1A1A1A;
}

/* Dunkler Knopf, etwa im Download-Band */
.wp-block-button.is-style-volt-dark-button > .wp-block-button__link {
	gap: 12px;
	min-height: 58px;
	padding: 0 28px;
	border-radius: 14px;
	background: #1A1A1A;
	color: #FFFFFF;
	font-family: Syne, system-ui, sans-serif;
	font-weight: 800;
	font-size: 19px;
}

.wp-block-button.is-style-volt-dark-button > .wp-block-button__link::before {
	background: #FF6B35;
}

.has-volt-orange-background-color .wp-block-button.is-style-volt-dark-button > .wp-block-button__link:hover {
	background: #1A1A1A !important;
	color: #FFFFFF !important;
	text-decoration: underline;
}

/* Textlink mit Pfeil */
.wp-block-button.is-style-volt-arrow > .wp-block-button__link {
	gap: 8px;
	padding: 0;
	background: transparent;
	color: #1A1A1A;
	font-weight: 500;
}

.wp-block-button.is-style-volt-arrow > .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-button.is-style-volt-arrow > .wp-block-button__link:hover {
	background: transparent;
	color: #B8400F;
	text-decoration: underline;
}

/* Handy-Rahmen */
.wp-block-image.is-style-volt-phone img {
	box-sizing: border-box;
	border: 8px solid #1A1A1A;
	border-radius: 32px;
}

.wp-block-image.is-style-volt-phone.is-small img {
	border-radius: 30px;
}

.wp-block-group.is-style-volt-stage {
	position: relative;
}

.wp-block-group.is-style-volt-stage > .wp-block-image.is-style-volt-phone img {
	border-width: 10px;
	border-radius: 44px;
	box-shadow: 0 34px 70px rgba(26, 26, 26, 0.2);
}

.app-volt .volt-shots .wp-block-image {
	margin: 0 0 18px;
}

/* Sticker */
p.is-style-volt-sticker {
	position: absolute;
	top: -16px;
	left: 18px;
	z-index: 2;
	margin: 0;
	padding: 4px 14px 5px;
	border: 2px solid #1A1A1A;
	border-radius: 99px;
	background: #FFFFFF;
	color: #1A1A1A;
	font-family: Syne, system-ui, sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	width: max-content;
	max-width: none;
}

.wp-block-group.is-style-volt-stage > .wp-block-image.aligncenter ~ p.is-style-volt-sticker {
	left: max(18px, calc(50% - 142px));
}

/* Dunkle Fläche: Band „Uhr“ und Datenkarte */
.wp-block-group.is-style-volt-dark {
	background: #1A1A1A;
	color: #FFFFFF;
}

.wp-block-group.is-style-volt-dark :where(p, li) {
	color: rgba(255, 255, 255, 0.78);
}

.wp-block-group.is-style-volt-dark :where(h1, h2, h3, h4, strong) {
	color: #FFFFFF;
}

.wp-block-group.is-style-volt-dark a {
	color: #FFFFFF;
}

/* Liste mit Linien */
.wp-block-list.is-style-volt-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #DDDBD4;
}

.wp-block-list.is-style-volt-lines > li {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid #DDDBD4;
}

.wp-block-list.is-style-volt-lines strong {
	font-family: Syne, system-ui, sans-serif;
	font-weight: 700;
}

.is-style-volt-dark .wp-block-list.is-style-volt-lines,
.is-style-volt-dark .wp-block-list.is-style-volt-lines > li {
	border-color: rgba(255, 255, 255, 0.14);
}

.wp-block-list.is-style-volt-lines.is-card {
	border-top: 0;
}

.wp-block-list.is-style-volt-lines.is-card > li {
	padding: 14px 0;
}

.wp-block-list.is-style-volt-lines.is-card > li:last-child {
	border-bottom: 0;
}

.wp-block-list.is-style-volt-lines.is-card strong {
	font-size: 18px;
}

/* Uhr mit Bildwechsel: im Editor ein normales Raster, auf der Seite eine runde Uhr */
:where(body:not(.editor-styles-wrapper)) .wp-block-gallery.has-nested-images.is-style-volt-watch {
	position: relative;
	display: block !important;
	width: 300px;
	max-width: 100%;
	aspect-ratio: 1;
	height: auto;
	margin: 120px auto 128px;
	box-sizing: border-box;
	border: 14px solid #2C2B28;
	border-radius: 50%;
	background: #000000;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

/* Die Spalte bildet die Ebene: Armbänder liegen hinter der Uhr, aber vor dem dunklen Band. */
:where(body:not(.editor-styles-wrapper)) .wp-block-column:has(> .wp-block-gallery.is-style-volt-watch) {
	isolation: isolate;
}

:where(body:not(.editor-styles-wrapper)) .wp-block-gallery.has-nested-images.is-style-volt-watch::before,
:where(body:not(.editor-styles-wrapper)) .wp-block-gallery.has-nested-images.is-style-volt-watch::after {
	content: "";
	position: absolute;
	left: 24%;
	right: 24%;
	height: 150px;
	z-index: -1;
	background: linear-gradient(90deg, #232220, #34332F 50%, #232220);
}

:where(body:not(.editor-styles-wrapper)) .wp-block-gallery.has-nested-images.is-style-volt-watch::before {
	bottom: calc(100% - 40px);
	border-radius: 14px 14px 0 0;
	-webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
	mask-image: linear-gradient(to top, #000 55%, transparent);
}

:where(body:not(.editor-styles-wrapper)) .wp-block-gallery.has-nested-images.is-style-volt-watch::after {
	top: calc(100% - 40px);
	border-radius: 0 0 14px 14px;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

:where(body:not(.editor-styles-wrapper)) .wp-block-gallery.has-nested-images.is-style-volt-watch figure.wp-block-image {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	animation: cogixo-volt-slide 14s ease-in-out infinite;
}

:where(body:not(.editor-styles-wrapper)) .wp-block-gallery.has-nested-images.is-style-volt-watch figure.wp-block-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 50%;
}

.wp-block-gallery.has-nested-images.is-style-volt-watch figure.wp-block-image:nth-child(2) { animation-delay: 3.5s; }
.wp-block-gallery.has-nested-images.is-style-volt-watch figure.wp-block-image:nth-child(3) { animation-delay: 7s; }
.wp-block-gallery.has-nested-images.is-style-volt-watch figure.wp-block-image:nth-child(4) { animation-delay: 10.5s; }
.wp-block-gallery.has-nested-images.is-style-volt-watch.is-paused figure.wp-block-image { animation-play-state: paused; }

@keyframes cogixo-volt-slide {
	0% { opacity: 0; transform: translateX(16px); }
	5% { opacity: 1; transform: none; }
	25% { opacity: 1; transform: none; }
	30% { opacity: 0; transform: translateX(-16px); }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.has-nested-images.is-style-volt-watch figure.wp-block-image {
		animation: none !important;
	}
	.wp-block-gallery.has-nested-images.is-style-volt-watch figure.wp-block-image:first-child {
		opacity: 1;
	}
}

.volt-watch-toggle {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0 auto;
	padding: 0 16px;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	background: transparent;
	color: #FFFFFF;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

/* Icon-Block: Füllung immer in Textfarbe, auch wenn ein Rahmen gesetzt ist */
.wp-block-icon svg {
	fill: currentColor;
}

/* Drei Schritte: Kopf, Text und Bild stehen in gemeinsamen Zeilen, die Bilder auf einer Höhe */
.app-volt .volt-steps > * {
	display: grid !important;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 14px;
	align-content: start;
}

.app-volt .volt-steps > * > * {
	margin: 0;
}

/* Kopf der drei Schritte: Titel und Zähler bleiben einzeilig */
.app-volt .volt-step-head > * {
	white-space: nowrap;
}

.app-volt .volt-step-head > p {
	flex: none;
}

@media (max-width: 380px) {
	.app-volt .volt-step-head > h3 {
		white-space: normal;
		font-size: 19px !important;
	}
}

@media (max-width: 600px) {
	.wp-block-button:where(.is-style-volt-pop, .is-style-volt-dark-button) {
		width: 100%;
	}
	.wp-block-button.is-style-volt-pop > .wp-block-button__link,
	.wp-block-button.is-style-volt-dark-button > .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		gap: 8px;
		padding: 0 12px;
		font-size: 16px;
		white-space: nowrap;
	}
}

/* Funktionen: Screens versetzt, auf schmalen Bildschirmen ohne Versatz */
@media (max-width: 781px) {
	.app-volt .volt-shots > .wp-block-column {
		padding-top: 0 !important;
	}
}

/* ---------- Bewegung ---------- */

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