/*  CSS Style Basis für die Webseite SystemSystem UG */
/*  Geschreiben von Raffaele VRM IT GmbH */

/* Body--------------------------------------------*/
body  {
	font-family: "Gabarito",sans-serif;
	font-size: 65%;
	margin: 0;
	padding: 0;
	text-align: left;
	color: #211f21;
	line-height: 2.6em;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

* {padding: 0; margin: 0; }
img	{
	border:none;
	max-width: 100%;
	height: auto;
}

#page-wrapper {
	margin: auto;
}

/* Header--------------------------------------------*/

header {
	height:80px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #d0d0d0;
}

header[role="banner"] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}


#header-top	{
	padding-left: 1%;
	padding-top: 20px;
	max-width: 1600px;
	min-width: 320px;
	margin: auto;
	padding-inline: 40px
}

#logo  {
	width:180px;
	float:left;
	padding-top: 3px;
	padding-right: 5px;
	position: absolute;
	z-index: 1000;
}

/* Navigation--------------------------------------------*/

nav             {
	float:right;
	text-align: right;
	margin-top:9px;
	padding-left: 320px;
	z-index:2000;
}

/* Menue-Link verstecken in großen Viewports */
a.toggle-nav {
	display: none;
}

#header_space	{
	margin-top: 80px;
}


/* Banner--------------------------------------------*/
.hero-banner {
	position: relative;
	height: 380px;          /* fixe Höhe */
	display: flex;
	align-items: flex-start; /* Inhalt startet oben */
	overflow: hidden;
}

/* Bild */
.hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
	z-index: 1;
}

/* Overlay */
.hero-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 2;
}

/* Inhalt */
.hero-content {
	position: relative;
	z-index: 3;
	color: #fff;

	max-width: 1600px;
	width: 100%;
	margin: 0 auto;

	padding-left: 40px;
	padding-right: 40px;
	padding-top: 70px;
}


.hero-content h2 {
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 20px;
}

.hero-content p {
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 30px;
	line-height: 1.5;
}

/* Button */
.hero-content .button {
	display: inline-block;
	padding: 10px 25px;
	background-color: #AB130F;
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.3s ease;
}

.hero-content .button:hover {
	background-color: #AB130F;
}


#main		{
	padding-bottom:30px;
	background-color: #FFFFFF;
	margin: auto;
	max-width: 1600px;
	min-width: 320px;
	width: 100%;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
}

#mainBreadcrum {
	float: left;
	margin-left: 2%;
	margin-top: 6px;
}

#mainBreadcrum ul li {
    display: inline;
    padding: 0px 2px;
	color: #FFFFFF;
	font-size: 14px;
}

#mainBreadcrum ul li a {
	color: #FFFFFF;
}

#mainBreadcrum ul li a:hover {
	color: #AB130F;
}

#mainContent {
	min-height: 360px;
	font-size: 1.4em;
}

#mainContent	header {
	height:inherit;
	background-image: inherit;
}

#mainInhalt	{
	font-size:1.2em;
	float: left;
	width: 74%;
}

aside		{
	margin-left:3%;
	width:23%;
	float:left;
	font-size:1.2em;
}

#mainInhaltleft	{
	font-size:1.2em;
	float: left;
	width: 47%;
}

#mainInhaltright	{
	margin-left:5%;
	width:47%;
	float:left;
	font-size:1.2em;
}

#mainInhaltFull	header {
	height:inherit;
	background-image: inherit;
}

#mainInhaltFull	{
	font-size:1.1em;
	width: 100%;
}

/* Angepasstes CCS für TYPO3 Inhalt #79 */
#mainInhaltFull #c79 figcaption	{
	color: #C01210;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	margin: 10px 0px 20px 0px;
}

#mainInhaltFull #c79 img:hover	{
	border: 10px solid #C01210;
}


#mainLeft	{
	float: left;
	width: 31%;
	margin-right: 3%;
}

#mainCenter	{
	float: left;
	width: 62%;
	margin-right: 3%;
}

#mainRight	{
	float: left;
	width: 31%;
}


.centered-text-element {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 40px;
	text-align: center;
}

.centered-text-element h2 {
	margin-bottom: 20px;
}

.centered-text-element p {
	line-height: 1.6;
}

/* Abschnitt / Wrapper */
.two-col-element {
	padding: 60px 40px;
}

.two-col-element.reverse .left-col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.two-col-wrapper {
	max-width: 1600px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: 1fr 1fr; /* 50% / 50% */
	gap: 32px;
	align-items: start;
}

/* Linke Seite (Bild + Untertitel) */
.image-block {
	margin: 0; /* figure default reset */
}

.rounded-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px; /* abgerundete Kanten */
}

.image-subtitle {
	margin-top: 14px;
	font-size: 1.05rem;
	text-align: center;
}

/* Rechte Seite (3 Boxen untereinander) */
.right-col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.info-box {
	border: 2px solid #cfcfcf;   /* graue Kontur */
	border-radius: 14px;
	padding: 22px;
	background: transparent;
}

.info-box h3 {
	margin: 0 10px 10px 0;
	font-size: 1.1em;
}

.info-box p {
	margin: 0;
	line-height: 1.6;
	font-size: 0.9em;
}

/* Responsive: ab 900px Breite -> untereinander */
@media (max-width: 900px) {
	.two-col-element {
		padding: 50px 30px;
	}

	.two-col-wrapper {
		grid-template-columns: 1fr; /* Spalten untereinander */
	}

	.two-col-element.reverse .two-col-wrapper {
		grid-template-columns: 1fr;
	}

	.two-col-element.reverse .right-col {
		order: -1; /* Bild nach oben */
	}
}


/* Optional: noch kleiner */
@media (max-width: 560px) {
	.two-col-element {
		padding: 40px 20px;
	}

	.info-box {
		padding: 18px;
	}
}

/* Kernleistungen ------------------------------------------- */
/* Section: Kernleistungen */
.kernleistungen {
	padding: 40px;
}

.kernleistungen__wrapper {
	max-width: 1200px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

/* Card container */
.kl-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	background: #fff;
	min-height: 360px;
}

/* Toggle (hidden checkbox) */
.kl-card__toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* 3D flip stage */
.kl-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 400px;

	transform-style: preserve-3d;
	transition: transform 650ms ease;
}

/* Flip on checked */
.kl-card__toggle:checked + .kl-card__inner {
	transform: rotateY(180deg);
}

/* Sides */
.kl-card__side {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
}

/* FRONT */
.kl-card__front {
	background: #fff;
}

/* Image */
.kl-card__media {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.kl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Floating icon bubble */
.kl-card__icon {
	position: absolute;
	left: 18px;
	top: 140px;

	width: 44px;
	height: 44px;
	border-radius: 999px;

	background: #fff;
	border: 2px solid #e6e6e6;
	color: #AB130F;

	display: grid;
	place-items: center;
}

.kl-card__icon i {
	font-size: 22px;
	line-height: 1;
}

/* Content */
.kl-card__content {
	padding: 22px 22px 24px 22px;
}

.kl-card__title {
	margin: 10px 0 10px 0;
	font-size: 1.2rem;
	font-weight: 800;
	color: #111;
}

.kl-card__text {
	margin: 0 0 18px 0;
	color: #6b6b6b;
	font-size: 1rem;
	line-height: 1.55;
	max-width: 60ch;
}

/* Link */
.kl-card__link {
	display: inline-flex;
	cursor: pointer;
	user-select: none;

	color: #AB130F;
	font-weight: 800;
	font-size: 0.95rem;
}

/* BACK (red detail state) */
.kl-card__back {
	transform: rotateY(180deg);
	background: #AB130F;
	color: #fff;

	padding: 22px 22px 18px 22px;
}

/* Back head */
.kl-card__back-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.kl-card__back-icon {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;

	display: grid;
	place-items: center;
}

.kl-card__back-icon i {
	font-size: 22px;
	line-height: 1;
}

.kl-card__back-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: #fff;
}

/* Back list */
.kl-card__list {
	margin: 12px 0 16px 0;
	padding: 0;
	list-style: none;

	display: grid;
	gap: 10px;

	max-height: 220px;          /* damit es wie im Screenshot scrollt */
	overflow: auto;
	padding-right: 8px;         /* Platz für Scrollbar */
}

.kl-card__list li {
	position: relative;
	padding-left: 16px;
	font-weight: 700;
	color: #fff;
	line-height: 1.55;
}

.kl-card__list li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #fff;

	position: absolute;
	left: 0;
	top: 0.75em;
}

/* Back link */
.kl-card__backlink {
	display: inline-flex;
	cursor: pointer;
	user-select: none;

	color: rgba(255, 255, 255, 0.9);
	font-weight: 800;
	font-size: 0.95rem;
	padding-top: 10px;
	padding-left: 20px;
}

/* Responsive */
@media (max-width: 1100px) {
	.kernleistungen__wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 650px) {
	.kernleistungen {
		padding: 20px;
	}

	.kernleistungen__wrapper {
		grid-template-columns: 1fr;
	}

	.kl-card,
	.kl-card__inner {
		min-height: 340px;
	}
}


/* Benefit Abteilungen ------------------------------------- */

/* Section: Benefit Abteilungen */
.benefit-abteilungen {
	padding: 40px;
}

.benefit-abteilungen__wrapper {
	max-width: 1100px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

/* Card */
.benefit-abteilungen__card {
	border-radius: 18px;
	padding: 28px 28px 26px 28px;

	background: radial-gradient(120% 140% at 30% 20%, #3a3a3a 0%, #1f1f1f 55%, #141414 100%);
	color: #fff;

	min-height: 260px;
}

/* Icon */
.benefit-abteilungen__icon {
	color: #AB130F;
	margin-bottom: 16px;
}

.benefit-abteilungen__icon i {
	font-size: 34px;
	line-height: 1;
}

/* Title */
.benefit-abteilungen__title {
	margin: 0 0 16px 0;
	font-size: 1.25rem;
	font-weight: 800;
	color: #fff;
}

/* List */
.benefit-abteilungen__list {
	margin: 0;
	padding: 0;
	list-style: none;

	display: grid;
	gap: 12px;
}

.benefit-abteilungen__list li {
	position: relative;
	padding-left: 18px;

	color: #e9e9e9;
	font-size: 1.05rem;
	line-height: 1.6;
	font-weight: 600;
}

/* Red dot bullets */
.benefit-abteilungen__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;

	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #AB130F;
}

/* Responsive */
@media (max-width: 1100px) {
	.benefit-abteilungen__wrapper {
		grid-template-columns: 1fr;
	}

	.benefit-abteilungen__card {
		min-height: auto;
	}
}

@media (max-width: 650px) {
	.benefit-abteilungen {
		padding: 20px;
	}

	.benefit-abteilungen__card {
		padding: 22px;
	}

	.benefit-abteilungen__icon i {
		font-size: 30px;
	}
}



/* Benefit Boxen ------------------------------------------- */
/* Section: Benefits Boxen */
.benefits-boxen {
	padding: 40px;
}

.benefits-boxen__wrapper {
	max-width: 1200px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Card */
.benefits-boxen__card {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	color: #575756;

	padding: 28px 24px;
	text-align: center;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.benefits-boxen__card:hover {
	border-color: #d8d8d8;
}

/* Icon Badge (wie Screenshot: runder Kreis, leichtes Rosa, rotes Icon) */
.benefits-boxen__icon {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #f6e6e6;
	color: #AB130F;

	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.benefits-boxen__icon i {
	font-size: 26px;
}

.benefits-boxen__icon svg {
	width: 26px;
	height: 26px;
}

/* Title + Text */
.benefits-boxen__title {
	margin: 4px 0 10px 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: #111;
}

.benefits-boxen__text {
	margin: 0;
	max-width: 34ch;
	font-size: 0.98rem;
	line-height: 1.55;
	color: #5b5b5b;
}

/* Responsive: 2 Spalten */
@media (max-width: 1100px) {
	.benefits-boxen__wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Responsive: 1 Spalte */
@media (max-width: 650px) {
	.benefits-boxen {
		padding: 20px;
	}

	.benefits-boxen__wrapper {
		grid-template-columns: 1fr;
	}
}

/* Mitarbeiter Kommentare ------------------------------- */
/* Section: Mitarbeiterkommentare */
.mitarbeiterkommentare {
	padding: 40px;
}

.mitarbeiterkommentare__wrapper {
	max-width: 1100px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Card (dunkel, mit weichem Verlauf wie im Design) */
.mk-card {
	border-radius: 18px;
	padding: 26px 26px 28px 26px;

	background: radial-gradient(120% 140% at 30% 20%, #3a3a3a 0%, #1f1f1f 55%, #141414 100%);
	color: #fff;

	min-height: 220px;
}

/* Header */
.mk-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	border-bottom: 0px solid #d0d0d0;
	background-color: inherit!important;
	background-image: none!important;
}

/* Avatar (roter Kreis) */
.mk-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 999px;

	background: #AB130F;
	color: #fff;

	display: grid;
	place-items: center;

	font-weight: 800;
	font-size: 1.15rem;
}

/* Meta */
.mk-card__name {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 800;
	color: #fff;
}

.mk-card__info {
	margin: 4px 0 0 0;
	color: #cfcfcf;
	font-size: 0.95rem;
	font-weight: 600;
}

/* Quote */
.mk-card__quote {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: #e9e9e9;
}

/* Responsive */
@media (max-width: 1100px) {
	.mitarbeiterkommentare__wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 650px) {
	.mitarbeiterkommentare {
		padding: 20px;
	}

	.mitarbeiterkommentare__wrapper {
		grid-template-columns: 1fr;
	}

	.mk-card {
		padding: 22px;
	}
}



/* Abteilungen ----------------------------------------- */

/* Section */
.abteilungen {
	padding: 40px;
}

.abteilungen__wrapper {
	max-width: 1600px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

/* Card */
.abteilung {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 18px;
	padding: 28px;

	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Icon-Badge */
.abteilung__icon {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #f6e6e6;
	color: #AB130F;

	display: grid;
	place-items: center;
}

.abteilung__icon i {
	font-size: 28px;
}

/* SVG im Badge: feste Größe */
.abteilung__icon svg {
	width: 26px !important;
	height: 26px !important;
	display: block;
}

/* Titel / Count */
.abteilung__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: #111;
}

.abteilung__count {
	margin: 0;
	font-weight: 700;
	color: #6b6b6b;
}

/* Text */
.abteilung__text {
	margin: 6px 0 4px 0;
	font-size: 1rem;
	line-height: 1.55;
	color: #6b6b6b;
}

/* Tags */
.abteilung__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

.abteilung__tags span {
	border: 1px solid #dcdcdc;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.75rem;
	font-weight: 600;
	color: #111;
	background: #ffffff;
	line-height: 0.9em;
}

/* Responsive */
@media (max-width: 1100px) {
	.abteilungen__wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 650px) {
	.abteilungen {
		padding: 20px;
	}

	.abteilungen__wrapper {
		grid-template-columns: 1fr;
	}
}


/* Abteilungsleiter ----------------------------------- */
/* Section: Abteilungsleiter */
.abteilungsleiter {
	padding: 40px;
}

.abteilungsleiter__wrapper {
	max-width: 1200px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;

	align-items: stretch;
}

/* Card */
.abteilungsleiter__card {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	padding: 26px 20px;

	text-align: center;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

/* Avatar */
.abteilungsleiter__avatar {
	width: 118px;
	height: 118px;
	border-radius: 999px;
	overflow: hidden;

	border: 4px solid #AB130F;
	background: #fff;

	margin-bottom: 6px;
}

.abteilungsleiter__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Name / Role */
.abteilungsleiter__name {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 800;
	color: #111;
}

.abteilungsleiter__role {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.45;
	color: #6b6b6b;
}

/* Badge (Outline, rot) */
.abteilungsleiter__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 1px 20px;
	border-radius: 999px;

	border: 2px solid #AB130F;
	color: #AB130F;
	font-weight: 700;
	font-size: 0.85rem;

	margin-top: 4px;
	line-height: 20px;
}

/* Years */
.abteilungsleiter__years {
	margin-top: 6px;

	display: inline-flex;
	align-items: center;
	gap: 8px;

	color: #6b6b6b;
	font-weight: 600;
	font-size: 1rem;
}

.abteilungsleiter__years-icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	color: #9b9b9b;
}

.abteilungsleiter__years-icon svg {
	width: 18px;
	height: 18px;
}

/* Responsive */
@media (max-width: 1100px) {
	.abteilungsleiter__wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 650px) {
	.abteilungsleiter {
		padding: 20px;
	}

	.abteilungsleiter__wrapper {
		grid-template-columns: 1fr;
	}

	.abteilungsleiter__avatar {
		width: 110px;
		height: 110px;
	}
}


/* GF Boxen ------------------------------------------ */
/* Section */
.gf-boxen {
	padding: 40px;
}

.gf-boxen__wrapper {
	max-width: 1100px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

/* Einzelne Box */
.gf-box {
	display: grid;
	grid-template-columns: 45% 55%;
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 18px;
	overflow: hidden;
}

/* Bild */
.gf-box__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Content */
.gf-box__content {
	padding: 32px 28px;

	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Badge */
.gf-box__badge {
	align-self: flex-start;
	background: #AB130F;
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
}

/* Name & Rolle */
.gf-box__name {
	margin: 6px 0 0 0;
	font-size: 1.35rem;
	font-weight: 800;
	color: #111;
}

.gf-box__role {
	margin: 0;
	font-size: 1.05rem;
	color: #6b6b6b;
}

/* Zitat */
.gf-box__quote {
	margin: 12px 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #4b4b4b;
}

/* Meta */
.gf-box__meta {
	margin-top: auto;
	font-size: 0.95rem;
	color: #6b6b6b;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Responsive */
@media (max-width: 1100px) {
	.gf-box {
		grid-template-columns: 1fr;
	}

	.gf-box__image {
		height: 320px;
	}
}

@media (max-width: 650px) {
	.gf-boxen__wrapper {
		grid-template-columns: 1fr;
	}

	.gf-boxen {
		padding: 20px;
	}

	.gf-box__content {
		padding: 24px 20px;
	}
}


/* Kennzahlen ---------------------------------------- */
/* Section: Kennzahlen */
.kennzahlen {
	padding: 30px 40px;
}

.kennzahlen__wrapper {
	max-width: 1200px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;

	align-items: start;
	text-align: center;
}

/* Item */
.kennzahlen__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* Zahl (rot) */
.kennzahlen__value {
	color: #AB130F;
	font-weight: 800;
	font-size: 1.4rem;
	line-height: 1;
}

/* Label (grau) */
.kennzahlen__label {
	color: #6b6b6b;
	font-size: 1.05rem;
	font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
	.kennzahlen {
		padding: 24px 20px;
	}

	.kennzahlen__wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}

@media (max-width: 560px) {
	.kennzahlen__wrapper {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}


/* Team Boxen ---------------------------------------- */

/* Section: TeamBoxen */
.teamboxen {
	padding: 40px;
}

.teamboxen__wrapper {
	max-width: 1000px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px;

	justify-items: center;
	text-align: center;
}

/* Einzelne Box */
.teamboxen__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Rundes Bild mit rotem Rand */
.teamboxen__avatar {
	width: 110px;
	height: 110px;
	border-radius: 999px;
	overflow: hidden;

	border: 4px solid #AB130F;
	background: #fff;

	display: grid;
	place-items: center;

	margin-bottom: 18px;
}

.teamboxen__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Text */
.teamboxen__name {
	margin: 0 0 6px 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: #111;
}

.teamboxen__role {
	margin: 0;
	font-size: 1rem;
	color: #6b6b6b;
	line-height: 1.35;
}

/* Responsive */
@media (max-width: 1100px) {
	.teamboxen__wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
}

@media (max-width: 650px) {
	.teamboxen {
		padding: 20px;
	}

	.teamboxen__wrapper {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.teamboxen__avatar {
		width: 100px;
		height: 100px;
	}
}

/* Bewerbungsprozzes ------------------------------- */
/* Section: Bewerbungsprozess */
.bewerbungsprozess {
	padding: 50px 40px;
}

.bewerbungsprozess__wrapper {
	max-width: 1600px;
	margin: 0 auto;
}

/* Header */
.bewerbungsprozess__header {
	text-align: center;
	margin-bottom: 34px;
	border-bottom: none!important;
}

.bewerbungsprozess__title {
	margin: 0 0 10px 0;
	font-size: 2.1rem;
	font-weight: 800;
	color: #111;
}

.bewerbungsprozess__subtitle {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
	color: #6b6b6b;
}

/* Liste */
.bewerbungsprozess__list {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0 auto;
	max-width: 900px;
}

/* Step */
.bewerbungsprozess__step {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 22px;
	align-items: start;
}

/* Nummer-Kreis */
.bewerbungsprozess__number {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #AB130F;
	color: #ffffff;
	font-weight: 800;
	display: grid;
	place-items: center;
	font-size: 1.05rem;
}

/* Content */
.bewerbungsprozess__content h3 {
	margin: 0 0 8px 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: #111;
}

.bewerbungsprozess__content p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: #6b6b6b;
	max-width: 78ch;
}

/* Responsive */
@media (max-width: 900px) {
	.bewerbungsprozess {
		padding: 40px 20px;
	}

	.bewerbungsprozess__step {
		grid-template-columns: 56px 1fr;
		gap: 16px;
	}

	.bewerbungsprozess__number {
		width: 46px;
		height: 46px;
	}

	.bewerbungsprozess__title {
		font-size: 1.85rem;
	}
}

/* Section */
.kontakt-personalabteilung {
	padding: 40px;
}

.kontakt-personalabteilung__wrapper {
	max-width: 1600px;
	margin: 0 auto;
}

/* Card */
.kontakt-personalabteilung__card {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	padding: 46px 40px;

	text-align: center;
	max-width: 700px;   /* NEU */
	margin: 0 auto;     /* NEU → mittig */
}

/* Top Icon */
.kontakt-personalabteilung__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px auto;

	color: #AB130F;
	display: grid;
	place-items: center;
}

.kontakt-personalabteilung__icon svg {
	width: 44px;
	height: 44px;
}

/* Title + Text */
.kontakt-personalabteilung__title {
	margin: 0 0 12px 0;
	font-size: 1.35rem;
	font-weight: 800;
	color: #111;
}

.kontakt-personalabteilung__text {
	margin: 0 auto 18px auto;
	max-width: 70ch;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #6b6b6b;
}

/* Links */
.kontakt-personalabteilung__links {
	display: grid;
	gap: 12px;
	justify-items: center;
}

.kontakt-personalabteilung__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	color: #111;
	font-weight: 700;
	text-decoration: none;
}

.kontakt-personalabteilung__link:hover {
	text-decoration: underline;
}

.kontakt-personalabteilung__link-icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	color: #6b6b6b;
}

.kontakt-personalabteilung__link-icon svg {
	width: 18px;
	height: 18px;
}

/* Phone icon in red like screenshot */
.kontakt-personalabteilung__link-icon--phone {
	color: #AB130F;
}

/* Responsive */
@media (max-width: 900px) {
	.kontakt-personalabteilung {
		padding: 20px;
	}

	.kontakt-personalabteilung__card {
		padding: 34px 22px;
	}
}




/* Stellen Boxen */

/* Section */
.jobs-section {
	padding: 40px;
}

.jobs-wrapper {
	max-width: 1500px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

/* Card */
.job-card {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 14px;
	padding: 22px;

	display: flex;
	flex-direction: column;
	gap: 14px;
}

.job-card:hover {
	border-color: #d7d7d7;
}

/* Header row (Titel + Badge) */
.job-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.job-title {
	font-size: 1.15rem;
	line-height: 1.25;
	margin: 0;
	font-weight: 700;
	color: #111;
}

/* Badge */
.job-badge {
	background: #AB130F;
	color: #fff;
	font-weight: 700;
	font-size: 0.75rem;
	padding: 0px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Text */
.job-text {
	margin: 0;
	color: #4b4b4b;
	line-height: 1.55;
	font-size: 0.98rem;
	width: 90%;
}

/* Meta list */
.job-meta {
	list-style: none;
	padding: 0;
	margin: 8px 0 0 0;

	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	color: #5a5a5a;
	font-size: 0.95rem;
}

.job-meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	color: #7a7a7a;
}

.icon svg {
	width: 18px;
	height: 18px;
}

/* Button */
.job-btn {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	padding: 8px 18px;

	background: #AB130F;
	color: #fff!important;
	font-weight: 700;
	text-decoration: none!important;
	border-radius: 10px;
}

.job-btn:hover {
	filter: brightness(0.92);
}

/* Responsive */
@media (max-width: 900px) {
	.jobs-section {
		padding: 30px;
	}

	.jobs-wrapper {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.jobs-section {
		padding: 20px;
	}

	.job-card {
		padding: 18px;
	}
}




/* Section mit max. Breite 1600px und Seitenabstand */
.boxes-section {
	padding: 40px 40px;      /* 40px links/rechts */
}

.boxes-wrapper {
	max-width: 1600px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 Boxen nebeneinander */
	gap: 24px;
}

/* Box Styling */
.box {
	background: #1a1a1a;
	border-radius: 16px;
	padding: 28px;

	color: #ffffff;
}

/* Typo in der Box */
.box h3 {
	font-size: 1.1em;
	margin: 0px 0px 15px 0px;
}

.box p {
	line-height: 1.6;
	color: #e6e6e6;
}

/* Breakpoint ca. 50%: 2 Spalten */
@media (max-width: 1150px) {
	.boxes-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
	.boxes-section {
		padding: 50px 30px;
	}
}

/* Breakpoint ca. 30%: 1 Spalte */
@media (max-width: 650px) {
	.boxes-wrapper {
		grid-template-columns: 1fr;
	}
	.boxes-section {
		padding: 40px 20px;
	}
}



.button-normal {
	display: inline-block;
	padding: 10px 25px;
	margin: 10px 10px;
	background-color: #AB130F;
	color: #ffffff!important;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none!important;
	border-radius: 8px;
	transition: background-color 0.3s ease;
}

.button-normal:hover {
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	text-decoration: unset!important;
}

.ce-intext.ce-left .ce-gallery {
	margin-right: 30px;
}

.ce-intext.ce-right .ce-gallery {
	margin-left: 30px;
}

.contenttable tbody tr td	{
	padding: 5px 10px 5px 0px;
}

.ce-table tbody tr td	{
	padding: 5px 20px 5px 0px;
}


.hero-footer {
	position: relative;
	height: 300px;
	background-color: #1a1a1a;

	display: flex;
	padding-top: 30px;
	justify-content: center;  /* horizontal mittig */
}

.hero-footer-content {
	color: #ffffff;
	text-align: center;

	max-width: 1600px;
	width: 100%;
	margin: 0 auto;

	padding: 0 40px; /* 40px links & rechts */
}

.hero-footer-content h2 {
	color: #ffffff;
	font-weight: 500;
	font-size: 1rem;
	margin-bottom: 20px;
}

.hero-footer-content p {
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 30px;
	line-height: 1.5;
}

/* Button */
.hero-footer-content .button {
	display: inline-block;
	padding: 8px 20px;
	margin:0 10px;
	background-color: #AB130F;
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.3s ease;
}

.hero-footer-content .button:hover {
	color: #000000;
}


/* Stellenangebote ---------------------------- */
/* Section: Stellenangebote */
.stellenangebote {
	padding: 40px;
}

.stellenangebote__wrapper {
	max-width: 1000px;
	margin: 0 auto;

	display: grid;
	gap: 14px;
}

/* Details reset */
.stelle {
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.stelle__summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 18px;

	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.stelle__summary::-webkit-details-marker {
	display: none;
}

.stelle__head {
	flex: 1;
	min-width: 0;
}

.stelle__title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.stelle__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: #111;
}

.stelle__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 3px 10px;
	border-radius: 999px;

	font-size: 0.62rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.4em;
}

.stelle__badge--service { background: #AB130F; }
.stelle__badge--vertrieb { background: #AB130F; }
.stelle__badge--logistik { background: #AB130F; }
.stelle__badge--ausbildung { background: #AB130F; }
.stelle__badge--verwaltung { background: #AB130F; }

.stelle__teaser {
	margin: 8px 0 10px 0;
	color: #6b6b6b;
	line-height: 1.55;
	font-size: 0.95rem;
	max-width: 90ch;
}

.stelle__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	color: #6b6b6b;
	font-size: 0.9rem;
	font-weight: 600;
}

.stelle__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.stelle__meta-item i {
	color: #9b9b9b;
}

/* Right toggle */
.stelle__details-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	font-weight: 700;
	font-size: 0.9rem;
	color: #111;
	white-space: nowrap;
}

.stelle__details-toggle i {
	transition: transform 200ms ease;
	color: #6b6b6b;
}

/* Rotate arrow when open */
.stelle[open] .stelle__details-toggle i {
	transform: rotate(180deg);
}

/* Content */
.stelle__content {
	padding: 10px 18px 18px 18px;
	border-top: 1px solid #ededed;
}

.stelle__content h4 {
	margin: 16px 0 10px 0;
	font-size: 0.95rem;
	font-weight: 900;
	color: #111;
}

.stelle__content ul {
	margin: 0;
	padding-left: 18px;
	color: #6b6b6b;
	line-height: 1.7;
	font-size: 0.95rem;
	display: grid;
	gap: 6px;
}

/* Buttons */
.stelle__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.stelle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	padding: 10px 25px;
	border-radius: 10px;

	font-weight: 800;
	font-size: 0.9rem;
	text-decoration: none;
	line-height: 1.2em;

	border: 1px solid transparent;
	cursor: pointer;
}

.stelle__btn--primary {
	background: #AB130F;
	color: #FFFFFF!important;
	text-decoration: none!important;
}

.stelle__btn--primary a:hover {
	background: #721210;
}

.stelle__btn--secondary {
	background: #fff;
	border-color: #dcdcdc;
	color: #111;
}

.stelle__btn--secondary i {
	color: #6b6b6b;
}

/* Responsive */
@media (max-width: 650px) {
	.stellenangebote {
		padding: 20px;
	}

	.stelle__summary {
		flex-direction: column;
		align-items: stretch;
	}

	.stelle__details-toggle {
		justify-content: flex-end;
	}
}



#footer-data	{
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
	padding: 20px 40px;
	height: 80px;
	font-size: 1.6em;
	max-width: 1600px;
	min-width: 320px;
	margin: auto;
	border-bottom: 1px solid #d0d0d0;
}

#footer-data h1 	{
	color: #FFFFFF;
	font-size: 1.6em;
	margin: 0px 0px 10px 0px;
}

#footer-data #logo	{
	width: 140px;
	float: left;
	padding-top: 5px;
	position: absolute;
	z-index: 1000;
}

#footermenue	{
	font-size:1.1em;
	line-height: 1.6em;
	float:right;
}

#footermenue li {
	list-style: none!important;
	float: left;
}

#footermenue li a {
	color: #717182;
	text-transform: none;
	text-decoration: none;
	line-height: 26px;
	padding-left: 20px;
}

#footermenue li a:active, #footermenue li a:hover {
	color: #AB130F;
}


#footer-meta	{
	position: relative;
	height: 60px;
	padding: 10px 0;
	text-align: center;
	font-size: 1.5em;
	color: #717182;
}



/* Headline Style --------------------------------------------*/

h1 	{
	color: #AB130F;
	font-size: 2em;
	font-weight: bold;
	margin: 5px 0px 25px 0px;
	line-height: 1.4em;
}

h2 	{
	color: #AB130F;
	font-size: 1.7em;
	margin: 30px 0px 14px 0px;
}

h3 	{
	color: #AB130F;
	font-size: 1.4em;
	margin: 30px 0px 6px 0px;
}

/* Hover --------------------------------------------*/
a:link, a:visited {color:#000000; text-decoration:underline; font-weight:normal;}
a:hover {color:#AB130F; text-decoration:underline; font-weight:normal;}

nav.form-navigation {
	float: right;
	margin-top: 0px;
}

/* Aufzählung-----------------------------------------------*/
#mainContent ul, #mainContent ol	{s
	padding-top:5px;
	padding-left:20px;
}

#c18 ul li, #c18 ol li	{
	list-style-image:none;
	list-style: none;
}


#mainContent ul li ul li, #mainContent ol li		{
	padding-left:2px;
	padding-bottom:5px;
	list-style-image: url("../Icons/rechteck_rot.png");
}

/* Dateilinks
 */

.ce-uploads img	{
	float: left;
	width: 40px;
}

.ce-uploads div	{
	float: left;
	width: 90%;
}

/* Loginfenster
 */

.tx-felogin-pi1 fieldset {
	border: none;
}

.tx-felogin-pi1 fieldset legend {
        display: none;
}

.tx-felogin-pi1 form	{
	width: 80px
}

.tx-felogin-pi1 form div    {
        margin-bottom: 5px
}

/* ws_flexslider mods.css ###########################################*/
.tx-ws-flexslider .caption-text {
	padding: 0px!important;
}
@media screen and (min-width: 861px) {
	.tx-ws-flexslider .caption-text {
		top: 160px!important;
		background:none!important;
		width: 100%!important;
		text-align: center;
	}
	.tx-ws-flexslider .caption-align-left .caption-text {
		left: 0px!important;
	}
	.tx-ws-flexslider .caption-align-left .caption-link {
		left: 0px!important;
	}
}

@media only screen and (max-width: 84em) {

	.ce-left .ce-gallery, .ce-column {
		float: inherit;
		margin-bottom: 20px;
	}

	#banner .ce-left .ce-gallery, #banner .ce-column{
		margin-bottom: 0px!important;
	}

}

@media only screen and (max-width: 56em) {
	[role=banner] {
		position: relative;
		height: 70px!important;
	}

	#header-top {
		padding-left: 0%;
		height: 100px;
	}

	.hero-footer-content .button {
		margin: 6px 10px;
	}

	.hero-footer {
		padding-top: 0px;
	}

	#footer-data	{
		height: 150px;
	}

	#logo {
		margin: auto;
		float: inherit;
		max-width: 240px;
		position: inherit;
	}

	#logo img {
		height: 100%;
		max-width: 100%;
	}
	nav {
		float: left;
		margin: auto;
		width: 100%;
		z-index:1500;
		position: absolute;
		padding-top: 0px!important;
		height: 0px!important;
		padding-left: inherit;
	}

	form {
		padding-top: 30px;
		width: inherit!important;
	}

	form nav {
		height: inherit!important;
	}

		#navMain li a {
		padding: 14px 20px;
	}
	#footer1	{
		width: 28%;
		margin-bottom: 20px;
	}
	#footer2	{
		width: 30%;
		margin-right: 0%;
	}
	#footer3	{
		width: 40%;
	}

	#main		{
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 20px;
	}

	#mainLeft	{
		width: 48%;
		margin-bottom: 20px;
	}

	#mainCenter	{
		float: left;
		width: 100%;
		margin-right: 0%;
		margin-bottom: 20px;
	}

	#mainRight	{
		float: left;
		width: 100%;
	}

}

@media only screen and (max-width: 54em) {
	#mainInhalt	{
		width: 100%;
	}
	aside	{
		width: 100%;
		margin-left: inherit;
	}

	.frame .frame-default .frame-type-textpic .frame-layout-0 .ce-bodytext {
		float: inherit;
	}

	.ce-bodytext {
		padding-bottom: 40px;
	}

	.ce-right .ce-gallery {
		float: left;
	}

	.ce-intext.ce-right .ce-gallery {
		margin-left: 0px;
	}
}

@media only screen and (max-width: 48em) {
	#banner		{
		margin-top: 0em;
	}
	#navMain	{
		margin: 0px;
	}
	.ce-right .ce-gallery {
		float: inherit;
	}
}

@media only screen and (max-width: 44em) {
	.vcard_info	{
		width: 100%;
	}
	.vcard_picture	{
		width: 100%;
	}
}

@media only screen and (max-width: 38em) {
	#footer1	{
		display: none;
	}
	#footer2	{
		width: 100%;
		margin-bottom: 20px;
	}
	#footermenue{
		width: 40%;
	}

	#footer3	{
		width: 40%;
	}
	#mainLeft	{
		width: 100%;
		margin-bottom: 20px;
	}
	#mainCenter	{
		float: left;
		width: 100%;
		margin-bottom: 20px;
	}
	#mainRight	{
		float: left;
		width: 100%;
	}
}

@media only screen and (max-width: 32em) {
	#banner	{
		display: none;
	}
	#mainHeader {
		display: none;
	}
	#banner_small {
		display: none;
	}

	h1 {
		width: 280px;
	}

}

@media only screen and (max-width: 21em) {

}