/* Overview pages — shared layout for products/overview_*.html */

*, *::before, *::after { box-sizing: border-box; }

@font-face {
	font-family: 'FiraSansCondensed-Medium';
	src: url('../Willkommen2015/fonts/FiraSansCondensed-Medium/fira-sans-condensed-v10-latin-500.woff2') format('woff2'),
		url('../Willkommen2015/fonts/FiraSansCondensed-Medium/fira-sans-condensed-v10-latin-500.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'OpenSans-Regular';
	src: url('../Willkommen2015/fonts/OpenSans-Regular/open-sans-v29-latin-regular.woff2') format('woff2'),
		url('../Willkommen2015/fonts/OpenSans-Regular/open-sans-v29-latin-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'FiraSansCondensed-SemiBold';
	src: url('../Willkommen2015/fonts/FiraSansCondensed-SemiBold/fira-sans-condensed-v10-latin-600.woff2') format('woff2'),
		url('../Willkommen2015/fonts/FiraSansCondensed-SemiBold/fira-sans-condensed-v10-latin-600.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'FiraSansCondensed-Regular';
	src: url('../Willkommen2015/fonts/FiraSansCondensed-Regular/fira-sans-condensed-v10-latin-regular.woff2') format('woff2'),
		url('../Willkommen2015/fonts/FiraSansCondensed-Regular/fira-sans-condensed-v10-latin-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

:root {
	--ov-ink: #1c2430;
	--ov-muted: #5a6573;
	--ov-brand: #3a6a8c;
	--ov-accent: #c45a1a;
	--ov-line: rgba(28, 36, 48, 0.12);
	--ov-panel: rgba(255, 255, 255, 0.92);
	--ov-section-bg: #eef3f7;
	--ov-pad: clamp(14px, 3vw, 22px);
	--ov-max: 1080px;
}

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

body.ov {
	margin: 0;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(58, 106, 140, 0.08), transparent 55%),
		radial-gradient(90% 70% at 0% 100%, rgba(196, 90, 26, 0.06), transparent 50%),
		#f4f7fa;
	color: var(--ov-ink);
	font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.ov a {
	color: var(--ov-brand);
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
}
body.ov a:hover { color: var(--ov-accent); }

.ov-wrap {
	max-width: var(--ov-max);
	margin: 0 auto;
	padding: 20px var(--ov-pad) 48px;
}

.ov-header {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ov-line);
}

.ov-eyebrow {
	margin: 0 0 0.35em;
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.78rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ov-brand);
}

.ov-header h1 {
	margin: 0;
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(1.55rem, 4vw, 2.15rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ov-ink);
}

.ov-subtitle {
	margin: 0.45em 0 0;
	font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--ov-muted);
}

.ov-header-action {
	margin-top: 12px;
}

.ov-header-action a {
	font-weight: 600;
	text-decoration: none;
}

.ov-header-action a:hover { text-decoration: underline; }

.ov-header-action .hint {
	display: block;
	margin-top: 0.2em;
	font-size: 0.82rem;
	color: var(--ov-muted);
	font-weight: 400;
}

.ov-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

@media (min-width: 720px) {
	.ov-layout--sidebar {
		grid-template-columns: 180px minmax(0, 1fr);
	}
	.ov-layout--hub {
		grid-template-columns: 180px minmax(0, 1fr);
	}
}

.ov-aside {
	font-size: 0.88rem;
}

.ov-aside-panel {
	padding: 14px;
	background: var(--ov-panel);
	border: 1px solid var(--ov-line);
	border-radius: 10px;
}

.ov-platforms {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}

.ov-aside p { margin: 0.6em 0; }

.ov-aside-nav {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ov-line);
}

.ov-aside-nav a {
	display: block;
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 0.85rem;
	text-decoration: none;
}

.ov-aside-nav p {
	margin: 0 0 1.35em;
}

.ov-aside-nav p:last-child {
	margin-bottom: 0;
}

.ov-aside-nav a:hover { text-decoration: underline; }

.ov-aside-nav .label {
	display: block;
	font-size: 0.75rem;
	color: var(--ov-muted);
	font-weight: 400;
}

.ov-main { min-width: 0; }

.ov-section {
	margin-bottom: 36px;
	background: var(--ov-panel);
	border: 1px solid var(--ov-line);
	border-radius: 10px;
	overflow: hidden;
}

.ov-section h2 {
	margin: 0;
	padding: 13px 18px;
	font-family: "FiraSansCondensed-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(0.92rem, 2.2vw, 1.05rem);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-transform: none;
	color: #fff;
	background: var(--ov-brand);
	border: none;
	border-radius: 0;
}

.ov-section--archive {
	border-color: rgba(138, 96, 72, 0.22);
}

.ov-section--archive h2 {
	color: #fff;
	background: #8a6048;
}

.ov-section .ov-products {
	padding: 6px 18px 14px;
}

.ov-section > .ov-product-desc,
.ov-section > p {
	margin: 0;
	padding: 14px 18px 16px;
}

.ov-section > .ov-product-desc + .ov-products,
.ov-section > p + .ov-products {
	padding-top: 0;
}

.ov-products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ov-product {
	padding: 14px 0;
	border-bottom: 1px solid var(--ov-line);
}

.ov-product:first-child {
	padding-top: 10px;
}

.ov-product:last-child { border-bottom: none; }

.ov-product-title {
	display: block;
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 1rem;
	text-decoration: none;
}

.ov-product-title:hover { text-decoration: underline; }

.ov-product-desc {
	margin: 0.25em 0 0;
	font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--ov-muted);
	font-size: 0.92rem;
}

.ov-product-desc--spaced {
	margin-top: 0.55em;
}

.ov-product-desc p { margin: 0.4em 0; }

.ov-product-sub {
	margin: 0.5em 0 0;
	padding-left: 1.2em;
	font-size: 0.88rem;
}

.ov-product-sub li { margin: 0.25em 0; }

.ov-product--media {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: start;
}

.ov-product--media-right {
	grid-template-columns: minmax(0, 16.5em) auto;
	justify-content: start;
	column-gap: 12px;
}

.ov-product--media-right > div {
	min-width: 0;
}

.ov-product--media img {
	max-width: 120px;
	height: auto;
	border-radius: 6px;
}

.ov-product--media-right img {
	max-width: 257px;
}

.ov-products--spiele-pushy {
	position: relative;
	padding-right: 275px;
}

.ov-product--pushy {
	min-height: 0;
}

.ov-products--spiele-pushy .ov-pushy-phone {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

.ov-products--spiele-pushy .ov-pushy-phone img {
	display: block;
	width: 257px;
	height: auto;
	max-width: 257px;
	border-radius: 6px;
}

@media (max-width: 640px) {
	.ov-products--spiele-pushy {
		padding-right: 0;
	}
	.ov-products--spiele-pushy .ov-pushy-phone {
		position: static;
		display: block;
		margin: 10px 0 4px;
	}
}

.ov-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ov-accent);
	border-radius: 3px;
	vertical-align: middle;
}

.ov-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ov-categories li {
	padding: 10px 0;
	border-bottom: 1px solid var(--ov-line);
}

.ov-categories li:last-child { border-bottom: none; }

.ov-categories a {
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 1rem;
	text-decoration: none;
}

.ov-categories a:hover { text-decoration: underline; }

.ov-categories .divider {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 2px solid var(--ov-line);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ov-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ov-callout {
	margin: 24px 0;
	padding: 12px 16px;
	background: var(--ov-brand);
	border-radius: 8px;
}

.ov-callout a {
	color: #fff;
	font-family: "FiraSansCondensed-SemiBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-decoration: none;
}

.ov-callout a:hover { text-decoration: underline; color: #fff; }

.ov-promo {
	margin: 24px 0;
}

.ov-promo img {
	max-width: 100%;
	height: auto;
}

.ov-text-block {
	margin-bottom: 1.4em;
}

.ov-text-block h3 {
	margin: 1.4em 0 0.5em;
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 300;
	color: var(--ov-brand);
}

.ov-text-block p { margin: 0.55em 0; }

.ov-license-block {
	margin-bottom: 1.6em;
}

.ov-license-block h2 {
	margin: 0 0 0.4em;
	padding: 0;
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 300;
	color: var(--ov-brand);
	background: none;
	border: none;
	border-radius: 0;
	text-transform: none;
	letter-spacing: normal;
}

.ov-matrix-wrap {
	overflow-x: auto;
	margin: 16px 0 24px;
	-webkit-overflow-scrolling: touch;
}

.ov-matrix {
	border-collapse: collapse;
	font-size: 0.78rem;
	min-width: 720px;
}

.ov-matrix th,
.ov-matrix td {
	padding: 6px 4px;
	border: 1px solid var(--ov-line);
	text-align: center;
	vertical-align: middle;
}

.ov-matrix th {
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	background: var(--ov-section-bg);
	color: var(--ov-brand);
}

.ov-matrix .product-name {
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
	padding-right: 10px;
}

.ov-matrix .product-name a { text-decoration: none; }
.ov-matrix .product-name a:hover { text-decoration: underline; }

.ov-matrix .cell-empty { background: #e8eaed; }
.ov-matrix .cell-yellow { background: #f5e6a0; }
.ov-matrix .cell-blue { background: #b8cfe8; }

.ov-footer {
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid var(--ov-line);
	font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.82rem;
	color: var(--ov-muted);
}

.ov-back {
	display: inline-block;
	margin-bottom: 10px;
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-decoration: none;
}

.ov-back:hover { text-decoration: underline; }

.ov-nav-links {
	margin: 24px 0;
	padding: 14px 0;
	border-top: 1px solid var(--ov-line);
}

.ov-nav-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ov-nav-links li { margin: 0.5em 0; }

.ov-nav-links a {
	font-family: "FiraSansCondensed-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-decoration: none;
}

.ov-redirect-notice {
	padding: 14px 16px;
	background: #fff8e6;
	border: 1px solid #e8c860;
	border-radius: 8px;
	margin-bottom: 16px;
}

.ov-redirect-notice strong {
	display: block;
	margin-bottom: 0.4em;
	color: #8a6000;
}

.ov-highlight-link {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 14px;
	background: var(--ov-accent);
	color: #fff !important;
	font-weight: 700;
	border-radius: 6px;
	text-decoration: none;
}

.ov-highlight-link:hover {
	background: #a04812;
	color: #fff !important;
}

.ov-section-body {
	padding: 16px 28px 22px 32px;
}

.ov-section-body > :first-child { margin-top: 0; }
.ov-section-body > :last-child { margin-bottom: 0; }

.ov-section-body p {
	margin: 0.7em 0;
	font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--ov-muted);
	font-size: 0.92rem;
}

.ov-section-body strong {
	color: var(--ov-ink);
	font-weight: 700;
}

.ov-steps,
.ov-checklist {
	margin: 0;
	padding: 0 0 0 1.25em;
	font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--ov-muted);
	font-size: 0.92rem;
}

.ov-steps li,
.ov-checklist li {
	margin: 0.75em 0;
	padding-left: 0.25em;
}

.ov-steps li::marker,
.ov-checklist li::marker {
	color: var(--ov-brand);
	font-weight: 700;
}

.ov-steps img {
	vertical-align: middle;
}

.ov-media-float {
	float: right;
	margin: 0 0 12px 16px;
}

.ov-media-float img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ov-cart-mark {
	margin: 0 0 10px;
}

.ov-cart-mark img {
	display: block;
}

@media (max-width: 520px) {
	.ov-media-float {
		float: none;
		margin: 0 0 12px;
	}
}

.ov-support-logo {
	margin: 0 0 16px;
}

.ov-support-logo img {
	display: block;
	max-width: min(277px, 100%);
	height: auto;
}

.ov-action-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 8px 0 4px;
}

.ov-action-grid--single {
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 14px;
}

.ov-action-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 14px 16px;
	background: var(--ov-section-bg);
	border: 1px solid var(--ov-line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--ov-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.ov-action-card:hover {
	border-color: var(--ov-brand);
	background: #e4edf4;
	color: var(--ov-ink);
	text-decoration: none;
}

.ov-action-card img {
	display: block;
	width: 72px;
	height: auto;
}

.ov-action-title {
	font-family: "FiraSansCondensed-SemiBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: normal;
	color: var(--ov-brand);
	line-height: 1.25;
}

.ov-action-desc {
	font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.88rem;
	color: var(--ov-muted);
	line-height: 1.4;
}

.ov-support-list {
	margin-top: 12px;
}

.ov-inline-icon {
	vertical-align: -2px;
	margin-right: 4px;
}

@media (max-width: 640px) {
	.ov-action-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}