/*
Theme Name: Divi Ondics
Theme URI: https://www.ondics.de
Template: Divi
Author: Ondics GmbH
Description: Divi-Child-Theme für die Ondics-Webseite. Umsetzung des Claude-Design-Mockups 1a (siehe handoff/DESIGN-SPEZIFIKATION.md).
Version: 1.0.0
*/

/* ============================================================
   Design-Tokens (handoff/DESIGN-SPEZIFIKATION.md)
   ============================================================ */
:root {
	--on-green: #76b82a;
	--on-green-dark: #659f1f;
	--on-green-hover: #5a9a15;
	--on-light-green: #8dc63f;
	--on-text: #3d3d3a;
	--on-heading: #2f2f2c;
	--on-secondary: #4a4a46;
	--on-muted2: #6b6b66;
	--on-muted: #9a988f;
	--on-border: #d9d7d2;
	--on-border-light: #e6e4df;
	--on-bg-light: #f7f6f3;
	--on-footer-border: #ecebe6;
	--on-footer-text: #8b8d81;
	--on-logo-grey: #b3b1a8;
}

/* ============================================================
   Basis: Source Sans 3, Farben, Sektionsbreiten
   ============================================================ */
body,
#page-container,
#et-main-area,
#page-container .et_pb_text {
	font-family: 'Source Sans 3', sans-serif;
	color: var(--on-text);
}

h1, h2, h3, h4 {
	font-family: 'Source Sans 3', sans-serif;
	color: var(--on-heading);
}

#page-container .et_pb_section {
	background-color: #ffffff;
}

/* Innenbreite 1280px minus 2×48px Innenabstand */
#page-container .et_pb_row {
	width: calc(100% - 96px);
	max-width: 1184px;
}

.on-h2 {
	font-size: 30px;
	font-weight: 600;
	color: var(--on-heading);
	text-align: center;
	margin: 0 0 28px;
}

/* ============================================================
   Header (Theme Builder): sticky, schrumpft beim Scrollen.
   Desktop: horizontale Navigation; Mobil: Burger + Klappmenü.
   ============================================================ */
/* Sticky auf dem äußeren Theme-Builder-Wrapper (dessen Elternelement die
   ganze Seite umfasst) – auf der Sektion selbst würde sticky wirkungslos
   bleiben, weil ihr Wrapper nur so hoch wie der Header ist */
header.et-l--header {
	position: sticky;
	top: 0;
	z-index: 900;
}

.on-header-section.et_pb_section {
	padding: 20px 0;
	transition: padding .2s ease, box-shadow .2s ease;
}

/* Divi-Row bringt eigenes vertikales Padding mit – im Header entfernen */
.on-header-section.et_pb_section .et_pb_row {
	padding-top: 0;
	padding-bottom: 0;
}

body.on-scrolled .on-header-section.et_pb_section {
	padding: 8px 0;
	box-shadow: 0 1px 10px rgba(0, 0, 0, .08);
}

.on-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.on-logo,
a.on-logo {
	display: block;
	text-decoration: none;
}

/* Logo: ondics-logo-black.svg (einfarbig schwarz), schrumpft beim Scrollen */
.on-logo img {
	display: block;
	height: 42px;
	width: auto;
	transition: height .2s ease;
}

body.on-scrolled .on-logo img {
	height: 32px;
}

/* Desktop-Navigation (handoff2: 15px/600, gap 34px) */
.on-nav {
	display: flex;
	align-items: center;
	gap: 34px;
	font-size: 15px;
	font-weight: 600;
}

.on-nav a {
	color: var(--on-text);
	text-decoration: none;
	transition: color .15s;
}

.on-nav a:hover {
	color: var(--on-green);
}

.on-nav a.on-active {
	color: var(--on-green);
	border-bottom: 2px solid var(--on-green);
	padding-bottom: 2px;
}

.on-nav a.on-btn-kontakt {
	background: var(--on-green);
	color: #ffffff;
	padding: 9px 20px;
	border-radius: 4px;
	transition: background .15s;
}

.on-nav a.on-btn-kontakt:hover {
	background: var(--on-green-dark);
	color: #ffffff;
}

/* Burger: ein Element, 3 Balken über Verlauf (3px Balken, 5px Lücke) –
   nur mobil sichtbar */
.on-burger {
	display: none;
	width: 26px;
	height: 19px;
	padding: 6px;
	box-sizing: content-box;
	cursor: pointer;
	background: repeating-linear-gradient(
		to bottom,
		var(--on-light-green) 0 3px,
		transparent 3px 8px
	) content-box;
	transition: opacity .15s;
}

.on-burger:hover {
	opacity: .7;
}

@media (max-width: 980px) {
	.on-burger {
		display: block;
	}

	.on-nav {
		display: none;
	}

	body.on-menu-open .on-nav {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #ffffff;
		border-bottom: 1px solid var(--on-border-light);
		box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
		padding: 20px 24px 24px;
	}

	.on-header-section.et_pb_section .et_pb_row,
	.on-header-section.et_pb_section .et_pb_column,
	.on-header-section.et_pb_section .et_pb_module {
		position: static;
	}
}

/* ============================================================
   Hero (Startseite)
   ============================================================ */
.on-hero.et_pb_section {
	background-size: cover;
	background-position: center;
	padding: 0;
}

.on-hero .et_pb_row {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 460px;
	padding: 0;
}

.on-hero .et_pb_column {
	display: flex;
	justify-content: center;
}

.on-hero-card.et_pb_module {
	background: rgba(255, 255, 255, .7);
	border-radius: 6px;
	padding: 36px 56px;
	text-align: center;
	margin-bottom: 0;
}

.on-hero-card h1 {
	margin: 0;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--on-heading);
}

.on-hero-sub {
	margin: 14px 0 0;
	font-size: 20px;
	color: var(--on-secondary);
}

.on-hero-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.on-btn,
a.on-btn {
	display: inline-block;
	padding: 13px 28px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 4px;
	text-decoration: none;
	transition: background .15s, color .15s;
}

a.on-btn-primary {
	background: var(--on-green);
	color: #ffffff !important;
}

a.on-btn-primary:hover {
	background: var(--on-green-dark);
}

a.on-btn-outline {
	border: 2px solid var(--on-text);
	color: var(--on-text) !important;
	padding: 11px 28px;
}

a.on-btn-outline:hover {
	background: var(--on-text);
	color: #ffffff !important;
}

/* ============================================================
   Intro-Absatz
   ============================================================ */
.on-intro-section.et_pb_section {
	padding: 64px 0 24px;
}

.on-intro {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.on-intro p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--on-secondary);
	margin: 0;
	text-align: center;
}

/* ============================================================
   Produktgrid 2×2
   ============================================================ */
/* Anker-Sprung "Produkte": unsichtbarer Anker 90px oberhalb der ersten
   Kachel-Reihe, damit weder Sticky-Header noch Divis Smooth-Scroll
   (ignoriert scroll-margin) die Kacheln abschneiden */
.on-anchor {
	position: relative;
	display: block;
	top: -90px;
	height: 0;
	visibility: hidden;
}

.on-grid-section.et_pb_section {
	padding: 24px 0 8px;
}

#page-container .on-grid-row.et_pb_row {
	max-width: 920px;
	padding: 0;
}

.on-grid-row .et_pb_column {
	margin-bottom: 40px;
}

a.on-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--on-text);
	text-decoration: none;
	margin: -16px;
	padding: 16px;
	border-radius: 8px;
	transition: background .2s ease, transform .2s ease, color .2s ease;
}

/* Hover: ganze Kachel hebt sich leicht und wird firmengrün,
   Titel/Text weiß, Pfeil-Chip invertiert (weiß mit grünem Pfeil) */
a.on-card:hover {
	transform: translateY(-3px);
	background: var(--on-green);
	color: #ffffff;
}

a.on-card:hover .on-card-title {
	color: #ffffff;
}

a.on-card:hover .on-card-text {
	color: rgba(255, 255, 255, .88);
}

a.on-card:hover .on-arrow {
	background: #ffffff;
	color: var(--on-green);
}

.on-card img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	border: 1px solid var(--on-border);
	border-radius: 4px;
	display: block;
}

.on-card-title {
	font-size: 20px;
	font-weight: 700;
}

.on-card-text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--on-muted2);
}

.on-arrow {
	display: inline-flex;
	width: 54px;
	height: 42px;
	background: var(--on-light-green);
	color: #ffffff;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
}

/* Grundgröße des SVG-Pfeils (Kontexte wie Chips/Buttons überschreiben sie) */
.on-arrow-ico {
	width: 18px;
	height: 18px;
	vertical-align: -4px;
	margin-left: 4px;
	display: inline-block;
}

.on-arrow {
	transition: background .2s ease, color .2s ease;
}

.on-arrow .on-arrow-ico {
	width: 28px;
	height: 28px;
}

/* ============================================================
   Aktuell & relevant (News)
   ============================================================ */
#page-container .on-news-section.et_pb_section {
	background-color: var(--on-bg-light);
	padding: 24px 0 36px;
}

#page-container .on-news-row.et_pb_row {
	max-width: 680px;
}

a.on-news-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--on-text);
	text-decoration: none;
}

a.on-news-item.on-sep {
	border-bottom: 1px solid var(--on-border-light);
	padding-bottom: 22px;
	margin-bottom: 26px;
}

.on-news-title {
	font-size: 18px;
	font-weight: 700;
	transition: color .15s;
}

a.on-news-item:hover .on-news-title {
	color: var(--on-green);
}

.on-news-date {
	font-size: 13px;
	color: var(--on-muted);
}

.on-news-teaser {
	font-size: 15px;
	line-height: 1.55;
	color: var(--on-muted2);
}

/* ============================================================
   Unsere Kunden (Logo-Grid, Platzhalter)
   ============================================================ */
#page-container .on-kunden.et_pb_section {
	background-color: #ffffff;
	padding: 32px 0 40px;
}

/* Automatisches Logo-Karussell (Marquee, keine Nutzer-Interaktion).
   Der Track enthält alle Logos zweimal; -50% ergibt eine nahtlose Schleife. */
.on-carousel {
	overflow: hidden;
	max-width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.on-carousel-track {
	display: flex;
	align-items: flex-start;
	width: max-content;
	animation: on-marquee 70s linear infinite;
}

@keyframes on-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.on-carousel-track {
		animation: none;
	}
}

.on-kunde {
	flex: none;
	width: 300px;
	margin-right: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.on-kunde img {
	height: 88px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}

.on-kunde span {
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	color: var(--on-muted);
}

/* ============================================================
   Karriere-Banner (Bild-Platzhalter)
   ============================================================ */
.on-karriere.et_pb_section {
	position: relative;
	background-color: #efeeea;
	background-size: cover;
	background-position: center 30%;
	padding: 0;
}

/* Weißer Verlauf links, damit Titel/Button auf dem Foto lesbar bleiben */
.on-karriere.et_pb_section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .45) 42%, rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
}

.on-karriere .et_pb_row {
	display: flex;
	align-items: center;
	min-height: 340px;
	width: calc(100% - 160px);
	max-width: 1120px;
	padding: 0;
	position: relative;
	z-index: 1;
}

.on-karriere-title {
	font-size: 34px;
	font-weight: 700;
	color: var(--on-heading);
}

a.on-btn-karriere {
	display: inline-block;
	background: var(--on-light-green);
	color: #ffffff !important;
	padding: 10px 22px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 3px;
	margin-top: 16px;
	text-decoration: none;
	transition: background .15s;
}

a.on-btn-karriere .on-arrow-ico {
	width: 18px;
	height: 18px;
	vertical-align: -4px;
	margin-left: 4px;
	display: inline-block;
	transition: transform .15s ease;
}

a.on-btn-karriere:hover .on-arrow-ico {
	transform: translateX(3px);
}

a.on-btn-karriere:hover {
	background: var(--on-green);
}

/* Platzhalter-Beschriftungen (Mockup-Konvention "bild: …") */
.on-ph-label {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 12px;
	color: #8a887f;
	background: rgba(255, 255, 255, .9);
	padding: 4px 10px;
	border-radius: 3px;
}

/* ============================================================
   Footer (Theme Builder)
   ============================================================ */
/* Auf kurzen Seiten (Kontakt, Produktseiten) den Footer an den unteren
   Viewport-Rand schieben statt mitten auf der Seite enden zu lassen */
body {
	min-height: 100vh;
}

#page-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#et-boc {
	flex: 1;
	display: flex;
	flex-direction: column;
}

#et-main-area {
	flex: 1;
	display: flex;
	flex-direction: column;
}

#et-main-area #main-content {
	flex: 1;
}

.on-footer-section.et_pb_section {
	background-color: #ffffff;
	border-top: 1px solid var(--on-footer-border);
	padding: 32px 0 33px;
}

/* Divi-Row-Padding im Footer entfernen (wie im Header) */
.on-footer-section.et_pb_section .et_pb_row {
	padding-top: 0;
	padding-bottom: 0;
}

.on-footer-section .et_pb_module,
.on-footer-section .et_pb_column {
	margin-bottom: 0;
}

.on-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--on-footer-text);
	flex-wrap: wrap;
	gap: 16px;
}

.on-footer-logo img {
	display: block;
	height: 24px;
	width: auto;
}

.on-footer-right {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.on-footer-right a {
	color: var(--on-footer-text);
	text-decoration: none;
	transition: color .15s;
}

.on-footer-right a:hover {
	color: var(--on-green-hover);
}

.on-social {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: 6px;
}

.on-social a {
	color: var(--on-logo-grey);
	display: flex;
}

.on-social a.on-li:hover { color: #0a66c2; }
.on-social a.on-x:hover  { color: #191b14; }
.on-social a.on-ig:hover { color: #e4405f; }

/* ============================================================
   Allgemeine Unterseiten (Karriere, Innovation Lab, Kontakt, …)
   ============================================================ */
.on-page-section.et_pb_section {
	padding: 48px 0 72px;
}

.on-page h1 {
	font-size: 40px;
	font-weight: 600;
	margin: 0 0 20px;
}

.on-page h2 {
	font-size: 30px;
	font-weight: 600;
	margin: 32px 0 16px;
}

.on-page h3 {
	font-size: 22px;
	font-weight: 700;
	margin: 28px 0 12px;
}

.on-page p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--on-secondary);
	margin: 0 0 18px;
	padding-bottom: 0;
}

.on-page ul,
.on-page ol {
	font-size: 16px;
	line-height: 1.8;
	color: var(--on-secondary);
	padding-left: 22px;
	margin: 0 0 18px;
	list-style: disc;
}

.on-page ol {
	list-style: decimal;
}

.on-page a {
	color: var(--on-green);
	font-weight: 600;
	text-decoration: none;
}

.on-page a:hover {
	color: var(--on-green-hover);
}

.on-page-img img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--on-border);
	border-radius: 4px;
}

.on-lead {
	font-size: 19px;
	font-weight: 600;
	color: var(--on-heading);
}

/* Stellenausschreibungen auf der Karriereseite */
.on-job {
	border: 1px solid var(--on-border);
	border-radius: 4px;
	padding: 28px 32px;
	margin: 0 0 28px;
}

.on-job h3 {
	margin-top: 0;
}

.on-job-tag {
	display: inline-block;
	background: var(--on-bg-light);
	border: 1px solid var(--on-border-light);
	border-radius: 3px;
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--on-muted2);
	margin-top: 4px;
}

/* ============================================================
   Innovation Lab: Stats, Timeline, Themen-Cluster, Tech-Pills
   ============================================================ */
.on-stats {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.on-stat {
	flex: 1;
	min-width: 150px;
	background: var(--on-bg-light);
	border: 1px solid var(--on-border-light);
	border-radius: 6px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.on-stat-num {
	font-size: 22px;
	font-weight: 700;
	color: var(--on-green);
}

.on-stat-label {
	font-size: 13px;
	color: var(--on-muted2);
}

.on-timeline {
	position: relative;
	margin: 8px 0 16px;
}

.on-timeline::before {
	content: '';
	position: absolute;
	left: 46px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: var(--on-border-light);
}

.on-tl-year {
	position: relative;
	padding: 0 0 26px 120px;
}

.on-tl-badge {
	position: absolute;
	left: 0;
	top: 0;
	width: 92px;
	text-align: center;
	background: var(--on-green);
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
	padding: 5px 0;
	border-radius: 999px;
}

ul.on-tl-items {
	list-style: none;
	padding: 0;
	margin: 3px 0 0;
}

ul.on-tl-items li {
	position: relative;
	padding-left: 18px;
	margin: 0 0 8px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--on-secondary);
}

ul.on-tl-items li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--on-light-green);
}

.on-clusters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin: 8px 0 16px;
}

.on-cluster {
	border: 1px solid var(--on-border);
	border-top: 3px solid var(--on-green);
	border-radius: 6px;
	padding: 24px 28px;
	background: #ffffff;
}

.on-cluster h3 {
	margin: 0 0 2px;
	font-size: 20px;
}

.on-cluster-count {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--on-green);
	margin-bottom: 14px;
}

.on-cluster ul {
	margin: 0;
	padding-left: 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--on-secondary);
}

.on-cluster li {
	margin-bottom: 6px;
}

/* Mini-Timeline innerhalb der Themen-Karten */
.on-ctl {
	position: relative;
	margin-top: 6px;
}

.on-ctl::before {
	content: '';
	position: absolute;
	left: 28px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--on-border-light);
}

.on-ctl-year {
	position: relative;
	padding: 0 0 16px 74px;
}

.on-ctl-year:last-child {
	padding-bottom: 0;
}

.on-ctl-badge {
	position: absolute;
	left: 0;
	top: 0;
	width: 58px;
	text-align: center;
	background: var(--on-green);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 0;
	border-radius: 999px;
}

.on-cluster .on-ctl ul {
	list-style: none;
	margin: 1px 0 0;
	padding: 0;
}

.on-cluster .on-ctl li {
	position: relative;
	padding-left: 14px;
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--on-secondary);
}

.on-cluster .on-ctl li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--on-light-green);
}

.on-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 16px;
}

.on-pill {
	background: var(--on-bg-light);
	border: 1px solid var(--on-border);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 14px;
	color: var(--on-secondary);
}

@media (max-width: 980px) {
	.on-clusters {
		grid-template-columns: 1fr;
	}

	.on-tl-year {
		padding-left: 0;
		padding-top: 34px;
	}

	.on-timeline::before {
		display: none;
	}
}

/* Screenshot-Platzhalter auf Produktseiten */
.on-ph-shot {
	height: 300px;
	margin-bottom: 24px;
}

/* ============================================================
   Produktseiten: getönte Hero-Bande in Produkt-Akzentfarbe,
   "Weitere Produkte"-Reihe
   ============================================================ */
#page-container .on-prod-hero.et_pb_section {
	padding-bottom: 40px;
}

#page-container .on-prod-ckan.et_pb_section         { background-color: #eef3f9; }
#page-container .on-prod-cogpt.et_pb_section        { background-color: #f2f8ea; }
#page-container .on-prod-dartabase.et_pb_section    { background-color: #f5f1f9; }
#page-container .on-prod-industrie-40.et_pb_section { background-color: #faf2ea; }

.on-prod-hero .on-ph {
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .75) 0 14px, rgba(255, 255, 255, .45) 14px 28px);
}

#page-container .on-prod-body.et_pb_section {
	padding-top: 32px;
	padding-bottom: 24px;
}

#page-container .on-more-section.et_pb_section {
	padding: 16px 0 56px;
}

#page-container .on-more-row.et_pb_row {
	padding-top: 0;
}

.on-more-row .on-card img {
	height: 180px;
}

.on-more-row .on-card-title {
	font-size: 17px;
}

.on-more-row .on-card-text {
	font-size: 14px;
}

.on-more-row .on-arrow {
	width: 46px;
	height: 36px;
}

.on-more-row .on-arrow .on-arrow-ico {
	width: 24px;
	height: 24px;
}

/* ============================================================
   Karriere: Anker-Chips, Stellen nebeneinander, Schritt-Karten,
   Hinweis-Raster
   ============================================================ */
.on-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 20px;
}

.on-page .on-chips a {
	border: 1px solid var(--on-border);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--on-secondary);
	transition: color .15s, border-color .15s;
}

.on-page .on-chips a:hover {
	color: var(--on-green);
	border-color: var(--on-green);
}

.on-jobs-row .on-job {
	margin-bottom: 0;
	height: 100%;
	box-sizing: border-box;
}

.on-steps {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin: 8px 0 16px;
}

.on-step {
	flex: 1;
}

/* Grüner Pfeil zwischen den Schritten */
.on-step-arrow {
	flex: none;
	display: flex;
	align-items: center;
	color: var(--on-green);
}

.on-step-arrow .on-chevrons {
	width: 52px;
	height: 52px;
}

.on-step {
	background: var(--on-bg-light);
	border: 1px solid var(--on-border-light);
	border-radius: 6px;
	padding: 0;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

/* Große weiße Ziffer auf grünem Block (volle Kartenhöhe, kein Kreis) */
.on-step-num {
	flex: none;
	width: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--on-green);
	color: #ffffff;
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
}

.on-step p {
	margin: 0;
	padding: 20px 22px;
	font-size: 15px;
	align-self: center;
}

.on-hint-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 8px 0 20px;
}

.on-hint {
	border: 1px solid var(--on-border);
	border-radius: 6px;
	padding: 24px 26px;
}

.on-hint h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 18px;
}

.on-hint-num {
	display: inline-flex;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--on-green);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	align-items: center;
	justify-content: center;
}

.on-hint p {
	font-size: 14.5px;
	margin: 0 0 12px;
}

.on-hint p:last-child {
	margin-bottom: 0;
}

.on-hint ul {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 12px;
	padding-left: 18px;
}

/* ============================================================
   Unterseite "Über Ondics"
   ============================================================ */
.on-about.et_pb_section {
	padding: 48px 0 72px;
}

.on-about .et_pb_column:last-child {
	padding-top: 96px;
}

.on-about-main h1 {
	font-size: 40px;
	font-weight: 600;
	margin: 0 0 20px;
}

.on-about-main p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--on-secondary);
	margin: 0 0 20px;
	padding-bottom: 0;
}

.on-list-title {
	font-size: 16px;
	font-weight: 700;
	margin: 8px 0 12px;
	color: var(--on-text);
}

.on-about-main ul {
	font-size: 16px;
	line-height: 1.9;
	color: var(--on-secondary);
	padding-left: 22px;
	margin: 0 0 12px;
	list-style: disc;
}

.on-about-main h2 {
	font-size: 30px;
	font-weight: 600;
	margin: 32px 0 16px;
}

.on-links {
	display: flex;
	gap: 20px;
	margin-top: 6px;
}

.on-links a {
	font-weight: 600;
	color: var(--on-text);
	text-decoration: none;
	transition: color .15s;
}

.on-links a:hover {
	color: var(--on-green-hover);
}

.on-links .on-arrow-ico {
	color: var(--on-green);
	transition: transform .15s ease;
}

.on-links a:hover .on-arrow-ico {
	transform: translateX(3px);
}

/* Bild-Platzhalter der Unterseite */
.on-ph {
	position: relative;
	border: 1px solid var(--on-border);
	border-radius: 4px;
	background: repeating-linear-gradient(45deg, #f0efec 0 14px, #e6e4df 14px 28px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.on-ph .on-ph-tag {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 12px;
	color: #8a887f;
	background: rgba(255, 255, 255, .9);
	padding: 4px 10px;
	border-radius: 3px;
}

.on-ph-team {
	height: 300px;
	margin-bottom: 24px;
}

.on-ph-portrait {
	width: 180px;
	height: 220px;
}

.on-gf {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
}

.on-gf-main {
	flex: 1 1 320px;
	min-width: 0;
}

.on-gf-figure {
	flex: 0 0 180px;
	margin: 0;
}

.on-portrait-photo {
	width: 180px;
	height: auto;
	border-radius: 4px;
	display: block;
}

.on-ph-awards {
	height: 140px;
	margin-top: 12px;
}

.on-portrait-name {
	font-size: 19px;
	font-weight: 700;
	margin-top: 10px;
}

.on-portrait-role {
	font-size: 14px;
	color: var(--on-muted2);
}

/* ============================================================
   News-Liste: Bild rechts, Blätterfunktion, Mehr-Link
   ============================================================ */
a.on-news-item {
	flex-direction: row;
	align-items: flex-start;
	gap: 22px;
}

.on-news-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.on-news-thumb {
	flex: 0 0 150px;
}

.on-news-thumb img {
	display: block;
	width: 150px;
	height: 100px;
	object-fit: cover;
	border: 1px solid var(--on-border);
	border-radius: 4px;
	background: #fff;
}

.on-news-more {
	margin-top: 28px;
}

.on-news-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 32px;
	font-size: 15px;
}

.on-news-pagination .page-numbers {
	padding: 6px 12px;
	border: 1px solid var(--on-border);
	border-radius: 4px;
	color: var(--on-text);
	text-decoration: none;
}

.on-news-pagination .page-numbers.current {
	background: var(--on-green);
	border-color: var(--on-green);
	color: #fff;
}

.on-news-pagination a.page-numbers:hover {
	border-color: var(--on-green);
	color: var(--on-green);
}

@media (max-width: 560px) {
	a.on-news-item {
		flex-direction: column;
	}

	.on-news-thumb {
		flex-basis: auto;
	}

	.on-news-thumb img {
		width: 100%;
		height: 160px;
	}
}

/* Grundabstände Überschriften (Vorgabe: h2 2rem, h3 1rem) */
h2 {
	margin: 2rem 0 2rem 0;
}

h3 {
	margin: 1rem 0 1rem 0;
}

/* ============================================================
   News-Einzelbeitrag (Posts)
   ============================================================ */
.single-post #main-content .container {
	max-width: 860px;
}

.single-post .et_post_meta_wrapper h1.entry-title {
	font-size: 32px;
	line-height: 1.25;
	padding-bottom: 6px;
}

.single-post .entry-content h2 {
	font-size: 22px;
	margin-top: 26px;
	padding-bottom: 8px;
}

.single-post .entry-content ul {
	list-style: disc;
	padding-left: 22px;
	margin-bottom: 1em;
}

.on-news-media {
	float: right;
	width: 290px;
	max-width: 45%;
	margin: 0 0 16px 22px;
}

.on-news-media img {
	border: 1px solid var(--on-border);
	border-radius: 4px;
	display: block;
}

.on-news-caption {
	display: block;
	font-size: 13px;
	color: var(--on-muted);
	margin-top: 6px;
}

@media (max-width: 640px) {
	.on-news-media {
		float: none;
		width: 100%;
		max-width: none;
		margin: 0 0 16px;
	}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
	.on-hero-card h1 {
		font-size: 36px;
	}

	.on-hero-card.et_pb_module {
		padding: 28px 32px;
	}

	.on-logos {
		grid-template-columns: repeat(2, 1fr);
	}

	.on-about .et_pb_column:last-child {
		padding-top: 0;
	}

	.on-footer {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 767px) {
	#page-container .et_pb_row {
		width: calc(100% - 48px);
	}

	.on-card img {
		height: 220px;
	}

	.on-karriere .et_pb_row {
		width: calc(100% - 64px);
	}
}

/* ============================================================
   Mobile-Feinschliff
   ============================================================ */
@media (max-width: 980px) {
	/* Gestapelte Produktkacheln: Divi entfernt bei der letzten Spalte
	   einer Row das margin-bottom - dadurch klebte CKAN an dARTabase */
	.on-grid-row .et_pb_column:last-child,
	.on-grid-row .et_pb_column.et-last-child {
		margin-bottom: 40px;
	}

	/* Karriere-Banner: Titel und Button zentrieren */
	.on-karriere .et_pb_row {
		justify-content: center;
	}

	.on-karriere .et_pb_text {
		width: 100%;
		text-align: center;
	}

	/* Karriere-Seite: Abstraktes Bild ausblenden und die Luecke zur
	   Sektion "Stellenausschreibungen" schliessen */
	.on-karriere-img {
		display: none;
	}

	.et_pb_column:has(> .on-karriere-img) {
		display: none;
		margin: 0;
	}

	.on-steps {
		flex-direction: column;
	}

	.on-step-arrow {
		justify-content: center;
	}

	.on-step-arrow .on-chevrons {
		transform: rotate(90deg);
		width: 40px;
		height: 40px;
	}

	/* Naht zwischen Intro-Row und Stellen-Row schliessen */
	.on-page-section .et_pb_row + .et_pb_row {
		padding-top: 0;
	}

	.on-page-section .et_pb_row:has(.on-karriere-img) {
		padding-bottom: 0;
	}

	.on-page-section .et_pb_row:has(.on-karriere-img) .et_pb_column {
		margin-bottom: 0;
	}

	/* Abstand zwischen Header und Seitentitel um ~40% reduzieren
	   (Sektions-Padding 48px + Divi-Row-Padding ~27px = ~78px -> ~47px) */
	.on-page-section.et_pb_section,
	.on-about.et_pb_section {
		padding-top: 17px;
	}
}

/* ============================================================
   Übersichtsseite /aktuelles/ (ohne Sidebar, volle Breite)
   ============================================================ */
.page-id-571 #sidebar {
	display: none;
}

.page-id-571 #left-area {
	width: 100%;
	padding-right: 0;
	float: none;
}

.page-id-571 #main-content .container:before {
	display: none;
}

.on-news-page {
	max-width: 860px;
}

/* Zwei-Spalten-Block mit Buttons (z. B. CKAN: ckan.de / ckan-hub.org) */
.on-cta-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 1.5rem 0 2.5rem;
}

.on-cta-col {
	flex: 1 1 280px;
	display: flex;
	flex-direction: column;
}

.on-cta-col p:last-child {
	margin-top: auto;
}