/*
 * Startseiten-Soft-Relaunch 2026 (Vorlage: ABG_Website_Soft_Relaunch_2026_NEU_STERN.pdf)
 * Wird nach abg.css und responsive.css geladen und überschreibt nur, was die Vorlage ändert.
 * Maße aus der Vorlage (1280 px breit): Satzkante links 116 px = 9%, Mittellinie 50%.
 */

:root {
	--abg-navy: #11344b;
	--abg-edge: 9%;
	--abg-band-light: #f3f5f6;
}

/* ---------- Schrift-Rückfall ----------
 * Die Hausschrift enthält kein frei stehendes Trema. Fehlt einmal ein Zeichen, soll der Browser
 * eine verwandte Grotesk nehmen statt einer beliebigen Systemschrift.
 */
html, body,
input, textarea, select, button { font-family: 'UniversLTPro-45Light', Helvetica, Arial, sans-serif; }
h1, h2 { font-family: 'UniversLTPro-LightUltCond', 'Helvetica Neue Condensed', Helvetica, Arial, sans-serif; }
.page-title, .frame-abg-section-label h2 { font-family: 'UniversLTPro-LightCond', Helvetica, Arial, sans-serif; }
.menu-wrapper a, .sub-page-link, .link-scroll, .scroll-up-text,
.abg-timeline__year, .p-category-wrap .p-project a, .p-category-wrap .p-category a { font-family: 'UniversLT-Condensed', Helvetica, Arial, sans-serif; }
.header-text { font-family: 'UniversLTPro-UltCond', Helvetica, Arial, sans-serif; }
.abg-iconslider__title, .abg-counter__value, .abg-business-label { font-family: 'UniversLTPro-LightUltCond', 'Helvetica Neue Condensed', Helvetica, Arial, sans-serif; }

/* ---------- Rubrik-Labels: immer links ---------- */
.section:not(.subpage) > .page-title-wrap,
.frame-abg-section-label {
	text-align: left;
	padding: 45px 40px 25px var(--abg-edge);
}
.section:not(.subpage) > .page-title-wrap .page-title,
.frame-abg-section-label h2,
.frame-abg-section-label header h2 {
	color: var(--abg-navy);
	font-family: 'UniversLTPro-LightCond';
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin: 0;
}
.frame-abg-section-label { position: relative; }

/* ---------- Gemeinsame Bänder und Pfeile ---------- */
.abg-band { position: relative; z-index: 1; width: 100%; }
.abg-arrow {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 84px;
	margin-top: -42px;
	padding: 0;
	cursor: pointer;
	/* kleine Grafik, aber großzügige Trefferfläche */
	background: transparent center / 13px auto no-repeat;
	z-index: 3;
	transition: opacity .3s ease;
}
.abg-arrow--prev { background-image: url('../images/relaunch/chevron-left-white.svg'); }
.abg-arrow--next { background-image: url('../images/relaunch/chevron-right-white.svg'); }
.abg-slider--light .abg-arrow--prev { background-image: url('../images/relaunch/chevron-left-dark.svg'); }
.abg-slider--light .abg-arrow--next { background-image: url('../images/relaunch/chevron-right-dark.svg'); }
.abg-arrow[disabled] { opacity: .25; cursor: default; }
.abg-arrow:not([disabled]):hover { opacity: .7; }

/* ---------- Unternehmen: Über uns ---------- */
.section3 .img-cont-wrap.frame-space-left-small .col-left { padding-left: var(--abg-edge); }
.section3 .img-cont-wrap .col-right .frame-text-wrap { max-width: 470px; }

/* ---------- Hero-Video ---------- */
.page-banner-video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.page-banner-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-banner-logo, .scrolldown-arrow-wrap { z-index: 2; }
.page-banner-video-toggle {
	position: absolute;
	left: 40px;
	bottom: 30px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .55);
	background: rgba(10, 30, 50, .25) url('../images/relaunch/pause.svg') center / 11px auto no-repeat;
	cursor: pointer;
	z-index: 4;
	transition: background-color .3s ease, border-color .3s ease;
}
.page-banner-video-toggle:hover { background-color: rgba(10, 30, 50, .5); border-color: #ffffff; }
.page-banner-video-toggle.is-paused { background-image: url('../images/relaunch/play-small.svg'); background-position: 54% 50%; }

/* ---------- Kennzahlen ---------- */
.abg-counter {
	position: relative;
	z-index: 1;
	background: #ffffff;
	padding: 60px 0 45px;
	margin: 90px 0 55px;
}
.abg-counter__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 12%;
}
.abg-counter__item { text-align: center; }
.abg-counter__value {
	color: var(--abg-navy);
	font-family: 'UniversLTPro-LightUltCond';
	font-size: 56px;
	line-height: 1;
	letter-spacing: 3px;
	white-space: nowrap;
}
.abg-counter__num {
	display: inline-block;
	font-size: 104px;
	letter-spacing: 8px;
	line-height: .8;
	margin: 0 4px 0 6px;
}
.abg-counter__unit { display: inline-block; }
.abg-counter__label {
	margin-top: 22px;
	color: var(--abg-navy);
	font-size: 16px;
	letter-spacing: 4.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Bild-Band (Standorte) ---------- */
.frame-abg-image-band { position: relative; z-index: 1; overflow: hidden; }
.frame-abg-image-band .ce-textpic { position: relative; }
.frame-abg-image-band .ce-gallery,
.frame-abg-image-band .ce-outer,
.frame-abg-image-band .ce-inner,
.frame-abg-image-band .ce-row,
.frame-abg-image-band .ce-column,
.frame-abg-image-band figure { width: 100%; float: none; margin: 0; }
.frame-abg-image-band img { width: 100%; height: auto; }
.frame-abg-image-band .ce-bodytext {
	position: absolute;
	/* über dem Standbild (z-index 1 in der Videobühne) – sonst fängt das unsichtbar geschaltete
	   Bild die Klicks auf „zu den Standorten“ ab und verdeckt den Text, solange kein Film läuft */
	z-index: 2;
	top: 32px;
	left: var(--abg-edge);
	max-width: 390px;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.3;
	text-shadow: 0 0 12px rgba(0, 20, 50, .35);
}
.frame-abg-image-band .ce-bodytext p { margin-bottom: 12px; }
.frame-abg-image-band .ce-bodytext a { color: #ffffff; }

/* Link unter der Projektliste – steht wie in der Vorlage unter der rechten Spalte */
.frame-abg-list-link { padding: 2px 0 0 calc(50% + 10px); }
.frame-abg-list-link p { margin: 0; }

/* ---------- Unterseite „Raum für Werte“ ---------- */
/* Oben steht nur der Rücksprung „< Unternehmen“; der Seitentitel entfällt,
   sonst stünde die Rubrik zweimal da. Die Zahl ist die Seiten-ID (Staging 67) –
   beim Live-Gang anpassen. */
.section67 > .page-title-wrap { display: none; }
.section67 > .backlink-wrap { padding-top: 50px; }
/* Das Zeichen „<“ sitzt in der Hausschrift tiefer als die Versalien */
.section67 .backlink-wrap a:before { top: -2px; }
/* Die Unterseiten liegen gestapelt in einer Ansicht; der Rücksprung „< Unternehmen“ soll
   nur einmal ganz oben stehen und sich nicht in jedem Abschnitt wiederholen */
.section.subpage ~ .section.subpage .backlink-wrap { display: none; }
/* Der Rücksprung liegt absolut über dem Inhalt – der Inhalt braucht deshalb Luft darunter */
.section67 > .content-wrap { padding-top: 160px; }

/* Beide Spalten rücken an die Mittellinie, wie auf den übrigen Unterseiten */
.abg-werte .col-left { padding-left: var(--abg-edge); padding-right: 26px; }
.abg-werte .col-left .frame { margin-left: auto; max-width: 480px; }
.abg-werte .col-right { padding-left: 26px; padding-right: var(--abg-edge); }
.abg-werte .col-right .frame { margin-right: auto; max-width: 480px; }
.abg-werte .col-right h2 { margin-bottom: 26px; }

/* Abstand unter dem Bild: seit die Wertekästen weg sind, nur noch der Abschnittsabschluss –
   so landet „TEAM“ im selben Abstand wie „KARRIERE“ unter Team (175 px) */
.frame-abg-werte-bild { position: relative; margin-bottom: 50px; }
.frame-abg-werte-bild .ce-gallery,
.frame-abg-werte-bild .ce-outer,
.frame-abg-werte-bild .ce-inner,
.frame-abg-werte-bild .ce-row,
.frame-abg-werte-bild .ce-column,
.frame-abg-werte-bild figure { width: 100%; float: none; margin: 0; }
.frame-abg-werte-bild img { width: 100%; height: auto; display: block; }
.frame-abg-werte-bild .ce-bodytext {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.frame-abg-werte-bild .ce-bodytext p {
	position: relative;
	margin: 0;
	padding: 0 52px;
	color: #ffffff;
	text-align: center;
	font-family: 'UniversLTPro-LightUltCond', 'Helvetica Neue Condensed', Helvetica, Arial, sans-serif;
	font-size: 46px;
	line-height: 1.08;
	letter-spacing: 1px;
}
.frame-abg-werte-bild .ce-bodytext p:before,
.frame-abg-werte-bild .ce-bodytext p:after {
	content: "";
	position: absolute;
	top: -6%;
	bottom: -6%;
	width: 1px;
	background: rgba(255, 255, 255, .8);
}
.frame-abg-werte-bild .ce-bodytext p:before { left: 0; }
/* Sobald der Film läuft, trägt er den Schriftzug selbst – die Überlagerung blendet weg */
.frame-abg-werte-bild .ce-bodytext { transition: opacity .6s ease; }
.frame-abg-werte-bild.abg-film-laeuft .ce-bodytext { opacity: 0; }
.frame-abg-werte-bild .ce-bodytext p:after { right: 0; }

.frame-abg-wert {
	background: var(--abg-navy);
	color: #ffffff;
	padding: 20px 26px 24px;
	margin-bottom: 60px;
}
.abg-werte .col-left .frame-abg-wert { text-align: right; }
.abg-werte .col-right .frame-abg-wert { margin-left: 0; }
/* Die rechte Reihe sitzt versetzt, wie in der Vorlage */
/* Die rechte Reihe setzt versetzt unter dem Einleitungstext an, wie in der Vorlage */
.abg-werte .col-right .frame-text-wrap + .animatedParent,
.abg-werte .col-right .frame-text-wrap + .frame-abg-wert { margin-top: 301px; }
/* Erster Absatz ist die Überschrift, zweiter der Beschreibungstext.
   (first-of-type statt first-child: Übersetzungen tragen davor einen Anker <a id="cXXX">.)
   Eigene Klassen im Text gehen bei der RTE-Verarbeitung verloren, deshalb über die Position. */
.frame-abg-wert p { margin: 0; }
.frame-abg-wert p:first-of-type {
	margin-bottom: 12px;
	font-family: 'UniversLTPro-LightUltCond', 'Helvetica Neue Condensed', Helvetica, Arial, sans-serif;
	font-size: 33px;
	line-height: 1.1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.frame-abg-wert p + p { font-size: 15px; line-height: 1.4; }

@media (max-width: 960px) {
	.abg-werte .col-left .frame-abg-wert { text-align: left; }
	.abg-werte .col-right .frame-text-wrap + .animatedParent,
	.abg-werte .col-right .frame-text-wrap + .frame-abg-wert { margin-top: 0; }
	.frame-abg-werte-bild { margin-bottom: 36px; }
	.frame-abg-wert { margin-bottom: 40px; }
	.frame-abg-werte-bild .ce-bodytext p { font-size: 36px; padding: 0 40px; }
	.frame-abg-wert p:first-of-type { font-size: 29px; }
}

/* ---------- Split-Slider (Portfolio) ----------
   Gleiche Fläche wie das bisherige Bewegtbild-Band: volle Breite, Verhältnis 2:1.
   Links ein großes Bild, rechts drei kleinere. Gewechselt wird weich:
   das neue Bild blendet auf und fährt dabei langsam aus einer leichten
   Vergrößerung zurück. */
.frame-abg-splitslider.abg-split-bereit .ce-gallery,
.frame-abg-splitslider.abg-split-bereit .ce-image { display: none; }
.abg-split {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: var(--abg-band-light);
	touch-action: pan-y;
}
.abg-split__rechts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1.1fr 1fr;
	gap: 6px;
	min-height: 0;
}
.abg-split__rechts > :first-child { grid-column: 1 / -1; }
.abg-split__tile { position: relative; overflow: hidden; min-height: 0; background: var(--abg-band-light); }

.abg-split__ly {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	opacity: 0;
	transition: opacity 1.4s ease;
}
.abg-split__ly.is-da { opacity: 1; }
.abg-split__ly.is-weg { opacity: 0; }
.abg-split__ly img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.07);
	transition: transform 7s cubic-bezier(.16,.74,.3,1);
}
.abg-split__ly.is-da img { transform: scale(1); }
/* zweite Spielart: weicher Wisch von der Seite, ebenfalls mit Zoom */
.abg-split__ly--wisch { clip-path: inset(0 100% 0 0); transition: opacity .9s ease, clip-path 1.5s cubic-bezier(.65,0,.35,1); }
.abg-split__ly--wisch.is-da { clip-path: inset(0 0 0 0); }

.abg-split__play {
	position: absolute;
	right: 16px; bottom: 14px;
	z-index: 3;
	width: 34px; height: 34px;
	border: 0; border-radius: 50%;
	cursor: pointer;
	/* Zeichen in ABG-Blau, der Knopf selbst bleibt weiß */
	background: rgba(255, 255, 255, .9) url('../images/relaunch/pause-navy.svg') center / 11px auto no-repeat;
	box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35);
	transition: transform .2s ease, background-color .2s ease;
}
.abg-split__play:hover { transform: scale(1.06); background-color: #ffffff; }
.abg-split__play.is-paused { background-image: url('../images/relaunch/play-small-navy.svg'); background-position: 54% 50%; }

/* Mobil nur das große Bild – in der schmalen Leiste wären vier Kacheln unlesbar */
@media (max-width: 760px) {
	.abg-split { grid-template-columns: 1fr; }
	.abg-split__rechts { display: none; }
	.abg-split__play { right: 10px; bottom: 10px; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.abg-split__ly, .abg-split__ly img, .abg-split__play { transition: none; }
	.abg-split__ly img { transform: none; }
}

/* ---------- Timeline ---------- */
.abg-timeline {
	margin-top: 90px;
	color: #ffffff;
	background: linear-gradient(rgba(17, 52, 75, .8), rgba(17, 52, 75, .8)), #11344b url('../images/relaunch/timeline-bg.jpg') center / cover no-repeat;
	padding: 42px 0 64px;
	overflow: hidden;
}
.abg-timeline__title {
	color: #ffffff;
	text-align: center;
	font-size: 52px;
	letter-spacing: 1px;
	margin-bottom: 40px;
}
.abg-timeline__nav { position: relative; width: 880px; max-width: calc(100% - 140px); margin: 0 auto; }
.abg-timeline__nav .abg-arrow { top: 52px; height: 68px; width: 36px; margin-top: 0; background-size: 10px auto; }
.abg-timeline__nav .abg-arrow--prev { left: -48px; }
.abg-timeline__nav .abg-arrow--next { right: -48px; }
.abg-timeline__nav:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 86px;
	height: 1px;
	background: #ffffff;
}
.abg-timeline__viewport { position: relative; width: 732px; max-width: 100%; margin: 0 auto; overflow: hidden; }
.abg-timeline__track {
	display: flex;
	position: relative;
	transition: transform .7s cubic-bezier(.34,.615,.4,.985);
	will-change: transform;
}
.abg-timeline__point { flex: 0 0 244px; list-style: none; }
.abg-timeline__point button {
	display: block;
	width: 100%;
	height: 100px;
	position: relative;
	cursor: pointer;
	color: inherit;
}
.abg-timeline__year {
	display: block;
	font-family: 'UniversLT-Condensed';
	font-size: 38px;
	line-height: 1;
	letter-spacing: 4px;
	color: rgba(255, 255, 255, .22);
	white-space: nowrap;
	transition: color .5s ease;
}
.abg-timeline__point.is-long .abg-timeline__year { font-size: 26px; letter-spacing: 3px; padding-top: 8px; }
.abg-timeline__point.is-active .abg-timeline__year,
.abg-timeline__point button:hover .abg-timeline__year { color: #ffffff; }
.abg-timeline__dot {
	position: absolute;
	left: 50%;
	top: 86px;
	width: 15px;
	height: 15px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	background: #173a53;
	transform: translate(-50%, -50%);
	transition: all .5s ease;
}
.abg-timeline__point.is-active .abg-timeline__dot { width: 27px; height: 27px; background: #ffffff; }
.abg-timeline__panels { position: relative; width: 640px; max-width: 100%; margin: 28px auto 0; transition: height .5s ease; }
.abg-timeline__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* Textspalte beginnt an der linken Kante des aktiven Punktes (Mitte minus halber Punkt) */
	display: grid;
	grid-template-columns: calc(50% - 13px) 1fr;
	align-items: start;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.abg-timeline__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .6s ease .15s, transform .6s ease .15s, visibility 0s;
}
.abg-timeline__img { justify-self: end; width: 255px; margin-right: 20px; }
/* Ohne Bild darf der Text nicht in die Bildspalte rutschen */
.abg-timeline__text { grid-column: 2; }
.abg-timeline__img img { width: 100%; height: auto; }
.abg-timeline__text { font-size: 13px; line-height: 1.4; letter-spacing: .2px; margin-top: -3px; max-width: 330px; }
.abg-timeline__text p { margin-bottom: 8px; }
.abg-timeline__text a { color: #ffffff; text-decoration: underline; }

/* ---------- Geschäftsfelder ---------- */
.section4 .two-col-container.abg-3-col-wrapper { margin-left: 0; margin-top: 30px; }
.section4 .abg-3-col-wrapper .col-left { padding-left: 12.8%; padding-right: 17px; }
.section4 .abg-3-col-wrapper .col-right { padding-left: 17px; }
.section4 .abg-business-wrap.abg-business-capital { margin-left: 0; }
.section4 .abg-business-wrap .abg-business-outer .abg-business-spc { width: 100% !important; }
.section4 .abg-3-col-wrapper .col-left .abg-business-spc { max-width: 459px; margin-left: auto; }
.section4 .abg-3-col-wrapper .col-right .abg-business-spc { max-width: 459px; }
.section4 .abg-business-img-hover-cont { aspect-ratio: 459 / 573; }
.section4 .abg-business-img-hover-cont > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section4 .abg-business-wrap.frame-text-wrap { max-width: 470px; margin-bottom: 18px; padding-right: 0; }
.section4 .abg-business-wrap.frame-text-wrap h2 { margin-bottom: 30px; }

/* Mouse-over wie auf der bisherigen Website: Anlesertext, auf dem Desktop im weißen Feld über der Kachel */
@media (min-width: 961px) {
	/* Bezugsrahmen des Anlesertextes ist die Kachel, nicht die Spalte */
	.section4 .abg-business-spc { position: relative; }
	.section4 .abg-business-hover-cont-in { justify-content: flex-start; padding: 13% 9% 0; }
	.section4 .abg-business-hover-cont h5 { margin-bottom: 26px; }
	.section4 .abg-business-wrap.abg-business-development .abg-business-desc,
	.section4 .abg-business-wrap.abg-business-capital .abg-business-desc {
		position: absolute;
		left: 10%;
		right: auto;
		top: 0;
		width: 80%;
		height: 100%;
		max-width: none;
		padding: 28% 9% 0;
		text-align: center;
		font-size: 13px;
		line-height: 1.5;
		z-index: 2;
		opacity: 0;
		visibility: hidden;
		/* darf den Mauszeiger nicht abfangen, sonst verschwindet „mehr erfahren“ */
		pointer-events: none;
		/* beim Verlassen sofort ausblenden */
		transition: opacity .3s ease;
	}
	.section4 .abg-business-desc:after { display: none; }
	.section4 .abg-business-desc p { margin-bottom: 0; }
	/* erst einblenden, wenn das weiße Feld aufgebaut ist (dessen Lauf dauert 0,8 s) */
	.section4 .abg-business-spc:hover .abg-business-desc {
		opacity: 1;
		visibility: visible;
		transition: opacity .45s ease .65s;
	}
	.section4 .more-abt { top: auto; bottom: 9%; margin-top: 0; z-index: 3; }
	.section4 .abg-business-spc:hover .more-abt { transition-delay: .65s; }
}

/* neue Typo auf den Kacheln */
.abg-business-label {
	position: absolute;
	left: 24px;
	bottom: 16px;
	max-width: 62%;
	z-index: 1;
	color: var(--abg-navy);
	font-family: 'UniversLTPro-LightUltCond';
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: 1.5px;
	transition: opacity .4s ease, transform .4s ease;
}
.abg-business-capital .abg-business-label { color: #ffffff; }
/* Das Kran-Foto ist unruhig, dunkles Blau geht darin unter */
.abg-business-development .abg-business-label { color: #ffffff; text-shadow: 0 1px 16px rgba(0, 18, 36, .6); }

/* Mouseover wie bisher: weißes Feld mit Titel und „mehr erfahren“ – jetzt beim Überfahren statt dauerhaft */
@media (hover: hover) and (min-width: 961px) {
	.section4 .gf-go .abg-business-hover-cont { width: 0; }
	.section4 .abg-business-spc:hover .abg-business-hover-cont { width: 80%; transition: all .8s cubic-bezier(.34,.615,.4,.985); }
	.section4 .abg-business-spc:hover .abg-business-label { opacity: 0; transform: translateY(10px); }
}

/* ---------- Portfolio: Bewegtbild-Band ---------- */
.frame-abg-media-band { position: relative; z-index: 1; }
.frame-abg-media-band .ce-gallery,
.frame-abg-media-band .ce-outer,
.frame-abg-media-band .ce-inner,
.frame-abg-media-band .ce-row,
.frame-abg-media-band .ce-column,
.frame-abg-media-band figure { width: 100%; float: none; margin: 0; }
.frame-abg-media-band img,
.frame-abg-media-band video { width: 100%; height: auto; display: block; }
.frame-abg-media-band .ce-textmedia { position: relative; }
.abg-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 140px;
	height: 140px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, .55) url('../images/relaunch/play.svg') 56% 50% / 46px auto no-repeat;
	cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
	z-index: 2;
}
.abg-play:hover { background-color: rgba(255, 255, 255, .75); transform: translate(-50%, -50%) scale(1.04); }
.abg-play.is-placeholder { cursor: default; }
.frame-abg-media-band.is-playing .abg-play { display: none; }

/* ---------- Portfolio: Aktivitäten + Projektliste ---------- */
.section5 .abg-activities { padding-left: var(--abg-edge); margin-top: 70px; }
.section5 .abg-activities .col-left .frame { max-width: 420px; }
.section5 .abg-activities h2 { margin-bottom: 28px; }
.section5.section .container { width: 100%; padding-left: 0; padding-right: 0; }
.section5 .p-project-images-spc,
.section5 .p-load-image-wrap { display: none; }
.section5 .p-category-wrap { padding: 0 var(--abg-edge); }
.section5 .p-category-wrap .p-category-list {
	display: grid;
	grid-template-columns: 1fr auto 50% ;
	align-items: baseline;
	margin-left: 0;
	text-align: left;
}
/* gleiche Schrift wie „GESCHÄFTSFELDER“ (die Beschriftung läuft dort in 45Light, nicht in der Condensed) */
.section5 .p-category-title {
	font-family: 'UniversLTPro-45Light', Helvetica, Arial, sans-serif;
	font-size: 14px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--abg-navy);
}
.section5 .p-category-wrap .p-category { margin-left: 0; font-size: 14px; }
.section5 .p-category-wrap .p-category:nth-child(2) { padding-right: 14px; }
.section5 .p-category-wrap .p-category:nth-child(2) a { color: #9bafb8; }
.section5 .p-category-wrap .p-category:nth-child(2) a:not(.active) { color: var(--abg-navy); }
.section5 .p-category-wrap .p-category:nth-child(3) { padding-left: 25px; }
.section5 .p-category-wrap .p-category a,
.section5 .p-category-wrap .p-category .label { font-weight: normal; letter-spacing: .5px; }
.section5 .p-category-wrap .p-project-list { width: 100%; max-width: none; padding: 28px 0 0; }
.section5 .p-project-list-inner { margin-left: 0; column-gap: 20px; }
.section5 .p-category-wrap .p-project { line-height: 1.2; padding-bottom: 5px; break-inside: avoid; }
.section5 .p-category-wrap .p-project a { font-size: 15px; color: var(--abg-navy); letter-spacing: .8px; }
.section5 .p-category-wrap .p-category .label { display: inline-block; }
.section5 .frame-abg-section-label { padding-top: 95px; }

/* ---------- Nachhaltigkeit ---------- */
.abg-sustain { margin-top: 5px; }
.abg-sustain .col-left { padding-left: var(--abg-edge) !important; }
.abg-sustain .col-left .frame { margin-left: auto; max-width: 400px; }
.abg-sustain .col-left h2 { text-align: right; }
.abg-sustain .col-right .frame { margin-top: 90px; max-width: 460px; }
.abg-sustain .col-right img { width: 100%; height: auto; }

/* Standbild mit ruhigem Hintergrundfilm.
   Der Film liegt unten und laeuft sofort, das Standbild liegt darueber und
   blendet weg, sobald Bilder kommen. (Safari spielt nichts ab, was es fuer
   unsichtbar haelt – deshalb steht der Film nie auf opacity 0.) */
.abg-videobuehne { position: relative; display: block; line-height: 0; }
.abg-videobuehne .abg-bgvideo {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	pointer-events: none;
	z-index: 0;
}
.abg-videobuehne img {
	position: relative;
	z-index: 1;
	transition: opacity 1.2s ease;
}
.abg-videobuehne.abg-film-laeuft img { opacity: 0; }
/* Logo-Animation soll ganz zu sehen sein, nicht formatfüllend beschnitten */
.abg-videobuehne--passend { background: #ffffff; }
.abg-videobuehne--passend .abg-bgvideo { object-fit: contain; }

/* ---------- Icon-Slider und Logo-Slider ---------- */
.abg-slider { margin-top: 75px; }
.abg-slider--dark {
	height: 260px;
	color: #ffffff;
	/* Grüner Hintergrund von SB, ohne Überlagerung – sonst wird das Grün wieder blau */
	background: #69893c url('../images/relaunch/iconslider-bg-gruen.png') center / cover no-repeat;
}
.abg-slider--light { height: 215px; background: var(--abg-band-light); margin-top: 20px; }
.abg-slider .abg-arrow--prev { left: 6.6%; }
.abg-slider .abg-arrow--next { right: 5%; }
.abg-slider__viewport {
	position: absolute;
	left: 15.6%;
	right: 12%;
	top: 0;
	bottom: 0;
	overflow: hidden;
}
.abg-slider__track { display: flex; height: 100%; will-change: transform; }
.abg-slider__item { flex: 0 0 33.3333%; min-width: 0; }
.abg-iconslider__item {
	padding: 48px 16px 0;
	display: grid;
	justify-content: center;
	justify-items: start;
	align-content: start;
}
.abg-iconslider__head { display: flex; align-items: flex-end; margin-bottom: 8px; }
.abg-iconslider__title {
	color: #ffffff;
	font-family: 'UniversLTPro-LightUltCond';
	font-size: 32px;
	line-height: 1;
	letter-spacing: 1px;
	margin: 0 16px 0 0;
}
.abg-iconslider__icon { width: auto; height: 46px; margin-bottom: 2px; }
.abg-iconslider__text { font-size: 13px; line-height: 1.4; max-width: 245px; }
.abg-iconslider__text p { margin: 0; }
/* Gleichmäßige Abstände: die Kacheln wachsen mit dem Logo, der Abstand steckt im Innenabstand */
.abg-logoslider__item { display: flex; align-items: center; justify-content: center; padding: 0 32px; }
.abg-logoslider__item a { display: block; text-align: center; }
.abg-logoslider__item img { margin: 0 auto; }
/* Alle Logos stehen gleich hoch. Die Dateien sind randlos zugeschnitten,
   damit die Höhenangabe bei allen dasselbe bewirkt. */
.abg-logoslider__item img { max-width: 240px; max-height: 61px; width: auto; height: auto; }
.abg-logoslider .abg-slider__viewport { left: 12%; right: 12%; }

/* Logo-Band läuft langsam und endlos durch, daher ohne Pfeile */
.abg-logoslider .abg-arrow { display: none; }
.abg-logoslider .abg-slider__viewport { left: 0; right: 0; }
.abg-logoslider .abg-slider__track {
	width: max-content;
	animation: abg-logolauf 58s linear infinite;
}
.abg-logoslider .abg-slider__track:hover { animation-play-state: paused; }
.abg-logoslider .abg-slider__item { flex: 0 0 auto; }
@keyframes abg-logolauf {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.abg-logoslider .abg-slider__track { animation: none; }
}

/* ---------- News und Engagements ---------- */
.section6.section .container { width: 100%; padding: 0 var(--abg-edge); margin-top: 70px; }
.section6 .frame-abg-section-label { padding-top: 90px; padding-bottom: 10px; }
.section6 .abg-slider--light { margin-top: 0; }

/* ---------- Footer ---------- */
.footer-cont-bottom .footer-lang { margin-right: 10px; }
.footer-cont-bottom .footer-lang a { font-family: 'UniversLT-Condensed'; }
.footer-cont-bottom .footer-lang a.is-current { text-decoration: none; }

/* ---------- Mobil ---------- */
@media (max-width: 960px) {
	/* Satzkante: 9 % – die Trennlinie der Seite liegt bei 5 %, Text darf nicht darauf stehen */
	.section:not(.subpage) > .page-title-wrap,
	.frame-abg-section-label { padding: 30px 9%; }
	.section:not(.subpage) > .page-title-wrap .page-title,
	.frame-abg-section-label h2 { font-size: 20px; }

	/* mobile Textspalte der Rubriken auf dieselbe Satzkante */
	.section3.section .header-mobi,
	.section4.section .header-mobi { padding-left: 9%; padding-right: 9%; }

	/* Kennzahlen */
	.abg-counter { margin: 40px 0; padding: 30px 9%; }
	.abg-counter__inner { flex-wrap: wrap; padding: 0; justify-content: space-around; row-gap: 40px; }
	.abg-counter__item { flex: 0 0 50%; }
	.abg-counter__value { font-size: 40px; }
	.abg-counter__num { font-size: 76px; letter-spacing: 4px; }
	.abg-counter__label { font-size: 16px; letter-spacing: 2px; white-space: normal; }

	/* Bild-Band: Text unter dem Bild auf blauem Grund */
	.frame-abg-list-link { padding-left: 9%; }
	/* News: weniger Luft zwischen Rubrik und erster Kachel (vorher 120 px) */
	.section6.section .container { margin-top: 10px; }   /* gleiche Spezifität wie die Desktop-Regel */
	/* Raum für Werte: der Rücksprung steht mobil im Fluss, die Desktop-Luft darunter entfällt */
	.section67 > .backlink-wrap { padding-top: 20px; }
	.section67 > .content-wrap { padding-top: 0; }
	.frame-abg-image-band .ce-bodytext { position: static; max-width: none; padding: 25px 9%; background: var(--abg-navy); text-shadow: none; font-size: 1rem; }

	/* Timeline: ein Jahr je Ansicht, Bild und Text darunter */
	.abg-timeline { margin-top: 40px; padding: 40px 0 50px; }
	.abg-timeline__title { font-size: 42px; margin-bottom: 30px; }
	.abg-timeline__nav { width: auto; max-width: none; margin: 0 16%; }
	.abg-timeline__nav .abg-arrow { top: 46px; height: 64px; width: 40px; background-size: 11px auto; }
	.abg-timeline__nav .abg-arrow--prev { left: -15%; }
	.abg-timeline__nav .abg-arrow--next { right: -15%; }
	.abg-timeline__viewport { width: 100%; }
	.abg-timeline__point { flex: 0 0 100%; }
	.abg-timeline__point button { height: 90px; }
	.abg-timeline__year { font-size: 30px; letter-spacing: 2px; }
	.abg-timeline__point.is-long .abg-timeline__year { font-size: 22px; letter-spacing: 1px; padding-top: 6px; }
	.abg-timeline__dot { top: 76px; }
	.abg-timeline__nav:before { top: 76px; }
	.abg-timeline__panels { width: auto; margin-top: 44px; }
	/* Der Innenabstand muss am Panel selbst sitzen: absolut positionierte Elemente ignorieren das Padding des Elternteils */
	.abg-timeline__panel { display: block; padding: 0 9%; }
	.abg-timeline__img { justify-self: start; width: auto; max-width: 420px; margin: 0 0 18px; }
	.abg-timeline__text { font-size: 1rem; line-height: 1.45; max-width: 520px; }

	/* Geschäftsfelder: volle Kachel mit Beschriftung statt weißem Feld */
	.section4 .two-col-container.abg-3-col-wrapper { margin-top: 0; }
	.section4 .abg-3-col-wrapper .col-left,
	.section4 .abg-3-col-wrapper .col-right { padding-left: 9%; padding-right: 9%; }
	.section4 .abg-3-col-wrapper .col-left .abg-business-spc,
	.section4 .abg-3-col-wrapper .col-right .abg-business-spc { max-width: none; }
	.section4 .abg-business-img-hover-cont { margin: 30px 0 0; height: auto; aspect-ratio: 459 / 573; overflow: hidden; }
	.section4 .abg-business-img-hover-cont > img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		object-fit: cover;
		transform: none;
	}
	.section4 .abg-business-hover-cont { display: none; }
	.section4 .abg-business-label { font-size: 40px; left: 20px; bottom: 16px; max-width: 78%; }
	.section4 .abg-business-wrap.frame-text-wrap { max-width: none; }
	/* Anlesertext steht mobil fest unter der Kachel – wie auf der bisherigen Website */
	.section4 .abg-business-desc {
		position: static;
		opacity: 1;
		visibility: visible;
		max-width: none;
		padding: 22px 0 0;
		text-align: left;
		font-size: 1rem;
		line-height: 1.45;
	}

	/* Portfolio */
	.section5 .abg-activities,
	.section5 .p-category-wrap { padding-left: 9%; padding-right: 9%; }
	.section5 .abg-activities { margin-top: 40px; }
	.section5 .abg-activities .col-left .frame { max-width: none; }
	/* Filterzeile: das alte Mobil-CSS setzt hier 150 px Innenabstand */
	.section5 .p-category-wrap .p-category-list { display: block; padding: 0; margin-left: 0; text-align: left; }
	.section5 .p-category-wrap .p-category,
	.section5 .p-category-wrap .p-category:nth-child(2),
	.section5 .p-category-wrap .p-category:nth-child(3) { display: block; padding: 0; margin: 0 0 8px; font-size: 1rem; }
	.section5 .p-category-wrap .p-category a,
	.section5 .p-category-wrap .p-category .label { font-size: 1rem; }
	.section5 .p-category-wrap .p-category ul { position: static; min-width: 0; }
	.section5 .p-category-wrap .p-category li a { padding: 4px 10px; }
	.section5 .p-category-title { display: block; font-size: 1rem; margin-bottom: 18px; }
	/* statt Auswahlfeld und zerstückelter Galerie: die Projektliste wie auf dem Desktop */
	.section5 .p-project-list-inner.hide-resp { display: block; column-count: 1; margin-left: 0; }
	.section5 .p-project-list-select { display: none; }
	.section5 .p-category-wrap .p-project-list { padding-top: 24px; }
	.section5 .p-category-wrap .p-project { padding-bottom: 12px; }
	.section5 .p-category-wrap .p-project a { font-size: 1rem; }

	/* Nachhaltigkeit */
	.abg-sustain .col-left { padding-left: 9% !important; padding-right: 9%; }
	.abg-sustain .col-left .frame { max-width: none; }
	.abg-sustain .col-left h2, .abg-sustain .col-left .frame-text-right { text-align: left; }
	.abg-sustain .col-right .frame { margin: 20px 9% 0; max-width: none; }

	/* Slider */
	.abg-slider { margin-top: 40px; }
	.abg-slider--dark { height: 252px; }
	.abg-slider--light { height: 200px; }
	.abg-slider .abg-arrow { width: 44px; height: 72px; margin-top: -36px; background-size: 12px auto; }
	.abg-slider .abg-arrow--prev { left: 1%; }
	.abg-slider .abg-arrow--next { right: 1%; }
	.abg-slider__viewport { left: 16%; right: 16%; }
	/* Das Logo-Band läuft auch mobil über die volle Breite, sonst werden die Logos angeschnitten */
	.abg-logoslider .abg-slider__viewport { left: 0; right: 0; }
	.abg-slider__item { flex-basis: 100%; }
	.abg-iconslider__item { padding: 40px 0 0; }
	.abg-iconslider__title { font-size: 32px; }
	.abg-iconslider__icon { height: 40px; }
	.abg-iconslider__text { font-size: 1rem; max-width: 280px; }
	/* Feste Maße statt Prozent, damit alle Logos auch mobil gleich hoch stehen */
	.abg-logoslider__item img { max-width: 200px; max-height: 52px; }
	.abg-logoslider__item { padding: 0 26px; }
	.abg-logoslider .abg-slider__track { animation-duration: 50s; }

	.abg-play { width: 110px; height: 110px; background-size: 36px auto; }
	.page-banner-video-toggle { left: 9%; bottom: 26px; width: 54px; height: 54px; background-size: 13px auto; }
}

/* Sehr schmale Geräte */
@media (max-width: 600px) {
	.abg-timeline__title { font-size: 36px; }
	.section4 .abg-business-label { font-size: 34px; }
}