/* Overrides */
.bg-grey, .bg-dark .bg-grey {background-color: var(--shade-grey-light) !important;}

.secondary {
	color: var(--color-main);
}

.stroke.white {
	stroke: var(--shade-white) !important;
}

.container-arrows button svg > .stroke {
	stroke: var(--svg-color);
}
.container-arrows button svg > .fill {
	fill: var(--svg-color);
}
.container-arrows button:not(:disabled):hover svg > .stroke, .container-arrows button:not(:disabled):focus svg > .stroke {
	stroke: var(--font-color-link);
}
.container-arrows button:not(:disabled):hover svg > .fill, .container-arrows button:not(:disabled):focus svg > .fill {
	fill: var(--font-color-link);
}

.border-effect {
	border-radius: 0%;
	-webkit-border-radius: 0%;
	-moz-border-radius: 0%;
}

section[name=innovation] .accordion .margin-xs-t {
	margin: 0px;
	margin-top: var(--padding-xs) !important;
}



/* ----------------------------------------------------------------
	Content
-----------------------------------------------------------------*/
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section > .container-text {
		width: 75%;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section > .container-text {
		width: 100% !important;
	}
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	.wrapper-cookie {
		width: 75%;
	}
}

.container-video.play svg {
	width: 6rem;
	height: 6rem;
	opacity: 0.8;
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	.container-video.play svg {
		width: 3.5rem;
		height: 3.5rem;
	}
}

/* Header */
section[name=header].view-h {
	height: 100lvh;
}
section[name=header] .logo {
	width: 6rem;
}
section[name=header] .container-languages .selection-languages {
	transition: opacity 0.25s;
}
section[name=header] .container-languages:not(:hover):not(:focus-within) .selection-languages {
	opacity: 0;
	pointer-events: none;
}
section[name=header] div:first-child .container-video {
	border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
}
section[name=header] .container-scroll svg {
	width: 1.5rem;
}
section[name=header] .container-scroll span {
	color: var(--color-main);
}
section[name=header] .container-scroll .stroke {
	stroke: var(--color-main);
	stroke-width: 1.5px;
}
section[name=header] .container-scroll.touch svg {
	width: 2rem;
}
section[name=header] .container-scroll.touch .stroke {
	stroke-width: 2.5px;
}
section[name=header] .container-scroll.touch {
	left: 50%;
}
#smooth-content:not(.touch) section[name=header] .container-scroll.touch, #smooth-content.touch section[name=header] .container-scroll:not(.touch) {
	display: none;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=header] {
		flex-direction: column;
		align-items: center;
		padding-bottom: 0px;
		padding-right: var(--grid-padding);
		padding-top: var(--padding-xl);
	}
	section[name=header].view-h {
		height: auto;
		min-height: 100vh;
		min-height: 100lvh;
	}
	section[name=header] .header-content {
		width: 100%;
		height: 45%;
		justify-content: center;
	}
	section[name=header] .header-content > *{
		align-items: center;
		justify-content: center;
	}
	section[name=header] .text-cta {
		text-align: center;
		width: 75%;
	}
	section[name=header] .container-video {
		border-bottom-left-radius: 0px !important;
		-webkit-border-left-radius: 0px !important;
		-moz-border-left-radius: 0px !important;
		border-top-right-radius: var(--border-radius-round) !important;
		-webkit-border-top-right-radius: var(--border-radius-round) !important;
		-moz-border-top-right-radius: var(--border-radius-round) !important;
	}
	section[name=header] .container-buttons {
		margin-top: var(--padding-s)!important;
	}

}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=header] {
		padding-top: var(--padding-l);
	}
	section[name=header] .header-content {
		height: 50%;
		width: 100%;
	}
	section[name=header] .nav {
		padding-bottom: var(--padding-xs);
	}
	section[name=header] .text-cta {
		text-align: center;
		width: 100%;
	}
	#loading .container-text {
		width: 75%;
	}
	section[name=header] .container-scroll svg {
		width: 1rem;
	}
}

/* Meilensteine */
section[name=milestones] .milestone:first-child {
	z-index: 2;
}
section[name=milestones] .year {
	font-size: 12.5rem;
	line-height: 9rem;
}
section[name=milestones] .number {
	color: var(--shade-grey-light);
}
section[name=milestones] .milestone .container-text.bg-white {
	background-color: color-mix(in srgb, var(--shade-white) 90%, transparent 10%);
}

section[name=milestones] .hexagon {
	height: 1.25rem;
}
section[name=milestones] .timeline .line-h {
	top: calc(1.25rem * 0.5 + var(--padding-xxs));
	width: calc(11.5 * var(--grid-column-small) + 11 * var(--grid-gutter-small) + (100vw - var(--grid-width)) / 2);
	left: calc(var(--grid-column-small) * 0.5);
}
section[name=milestones] .timeline button span {
	color: var(--shade-grey-light);
	transition: color var(--transition-default);
}
section[name=milestones] .timeline button:hover span {
	color: var(--color-main);
}
section[name=milestones] .timeline button .hexagon path {
	fill: var(--shade-white);
	stroke: var(--shade-grey-light);
	transition: fill var(--transition-l), stroke var(--transition-default);
}
section[name=milestones] .timeline button:hover .hexagon path {
	stroke: var(--color-main);
	fill: var(--shade-white);
}
section[name=milestones] .timeline button.active span {
	color: var(--color-main);
}
section[name=milestones] .timeline button.active .hexagon path {
	fill: var(--color-main);
	stroke: var(--color-main);
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=milestones] .container-content {
		width: 100%;
	}
	section[name=milestones] .content {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	section[name=milestones] .left {
		flex-direction: row-reverse;
		align-items: flex-start;
		width: 100%;
	}
	section[name=milestones] .left .height-2, section[name=milestones] .left .height-3 {
		height: 8rem;
	}
	section[name=milestones] .left .height-2 {
		width: 35%;
	}
	section[name=milestones] .left .height-3 {
		width: 65%;
	}
	section[name=milestones] .wrapper-milestones.width-9 {
		width: 100%;
	}
	section[name=milestones] .wrapper-milestones.height-5 {
		height: 35rem;
	}
	section[name=milestones] .left .year {
		position: absolute;
		bottom: var(--padding-xs);
		left: var(--padding-xs);
		font-size: 8rem;
		line-height: 5.5rem;
	}
	section[name=milestones] .milestone .year {
		position: absolute;
		top: var(--padding-xs);
		left: var(--padding-xs);
		font-size: 8rem;
		line-height: 5.5rem;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=milestones] .wrapper-milestones.height-5 {
		height: 17.5rem;
	}
	section[name=milestones] .timeline {
		display: none;
	}
	section[name=milestones] .container-arrows {
		justify-content: center;
	}
	section[name=milestones] .left .year, section[name=milestones] .milestone .year {
		font-size: 5rem;
		line-height: 3.5rem;
	}
	
}

/* CEO */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=ceo] .video-ceo {
		flex-direction: column;
		align-items: center;
	}
	section[name=ceo] .container-text {
		width: 100%;
		align-items: center; 
	}
	section[name=ceo] .container-text h2, section[name=ceo] .container-text .kicker, section[name=ceo] .container-text p {
		text-align: center; 
	}
	section[name=ceo] .container-video {
		width: 100%;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=ceo] .section-counter {
		flex-direction: column;
		width: calc(100% - (2 * var(--grid-padding)));
		align-items: center;
	}
	section[name=ceo] .counter-box {
		width: 75%;
	}
	section[name=ceo] .video-ceo {
		padding-bottom: var(--padding-xs);
		padding-left: var(--padding-xs);
		padding-right: var(--padding-xs);
	}
}


/* Innovation */
section[name=innovation] .container-text.bg-white {
	background-color: color-mix(in srgb, var(--shade-white) 90%, transparent 10%);
}
section[name=innovation] .cubes {
	width: 15%;
	right: -5%;
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=innovation] .accordion {
		flex-direction: column;
		width: 100%;
	}
	section[name=innovation] .accordion .item-content .container-text {
		width: 100%;
		padding-right: 3rem;
	}

	section[name=innovation] .accordion .item-content .container-text.cybersecurity {
		padding-right: 0px;
	}
	section[name=innovation] .wrapper-left {
		width: 100%;
		height: 35rem;
	}
	section[name=innovation] .wrapper-right {
		flex-direction: row;
		width: 100%;
		height: initial;
	}
	section[name=innovation] .wrapper-1, section[name=innovation] .wrapper-2, section[name=innovation] .wrapper-3{
		height: 10rem;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=innovation]  {
		width: 100%;
	}
	section[name=innovation] .wrapper-left {
		height: 35rem;
	}
	section[name=innovation] .wrapper-right {
		flex-direction: column;
	}
	section[name=innovation] .wrapper-1, section[name=innovation] .wrapper-2, section[name=innovation] .wrapper-3{
		height: 5.4rem;
	}
	section[name=innovation] .accordion .item-content .container-text {
		padding-right: 0px;
	}

}

/* Customer Accordion */
section[name=accordion] .accordion h3 {
	color: var(--color-second);
}
section[name=accordion] .accordion .item-content p {
	margin-top: var(--gap-xxs);
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=accordion] {
		flex-direction: column;
		align-items: center !important;
	}
	section[name=accordion] .text {
		align-items: center;
	}
	section[name=accordion] .text > * {
		text-align: center;
	}
	section[name=accordion] .accordion {
		width: 75%;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=accordion] .accordion {
		width: 100%;
	}
}

/* About congatec */
section[name=congatec] .wrapper-tile {
	box-sizing: border-box;
	padding-left:  calc(var(--grid-gutter-small) * 0.5);
	padding-right:  calc(var(--grid-gutter-small) * 0.5);
}
section[name=congatec] .tile .container-text {
	transition: top 0.5s;
}
section[name=congatec] .slider:not(:active) .tile:hover .container-text {
	top: 0%;
}
section[name=congatec] .tile .container-text.bg-light {
	background-color: color-mix(in srgb, var(--shade-grey-bright) 80%, transparent 20%);
}
section[name=congatec] .tile h3.h4 {
	text-align: center;
}
section[name=congatec] .tile h3.color {
	color: var(--color-second);
}
section[name=congatec] .tile .container-text.icon svg {
	padding-bottom: var(--padding-xxs);
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=congatec] .wrapper-tile .width-3 {
		width: 17rem;
	}
	section[name=congatec] .wrapper-tile .height-3 {
		height: 17rem;
	}
	section[name=congatec] .tile .container-text {
		padding: var(--padding-xs);
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=congatec] .container-text {
		padding-left: var(--grid-padding);
		padding-right: var(--grid-padding);
	}
	section[name=congatec] .wrapper-tile .width-3 {
		width: 15rem;
	}
	section[name=congatec] .wrapper-tile .height-3 {
		height: 15rem;
	}
}

/* Logo Rive */
section[name=logo] img {
	user-select: none;
	-webkit-user-select: none;
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=logo] picture {
		width: initial;
		height: 100%;
	}
	section[name=logo] .container {
		width: 75%;
	}

	section[name=logo] canvas {
		height: 30rem;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=logo] canvas {
		height: 20rem;
	}
}

/* Footer */
@media only screen and (max-width: 688px) and (orientation: portrait) {
	footer .content {
		flex-direction: column;
		align-items: center !important;
		gap: var(--gap-xxs);
	}
}