/*
* Theme Name:   Fahrdienst (2025)
* Theme URI:    https://www.koshinski.de/
* Author:       koshinski
* Author URI:   https://www.koshinski.de
* Description:  Fahrdienst - Gute Fahrt Template
* Version:      1.0.0
* License:      GNU General Public License v2 or later
* License URI:  http://www.gnu.org/licenses/gpl-2.0.html
* Template:     flatsome
* Text Domain:  flatsome-child
* Domain Path:  /languages/
* Tags:
*/

:root {
    --mainfont-regular: KlinicSlab-Book, sans-serif;
    --mainfont-bold: KlinicSlab-Bold, sans-serif;
    --mainfont-bold_italic: KlinicSlab-BookItalic, sans-serif;

	--main-text-color: #235a69;
    --highlight-color-1: #d4b915;
    --highlight-color-2: #009ed4;
    --highlight-color-3: #6e2c4b;
    --highlight-color-4: #fbf9ec;

	--dark-background-color: rgba(0,0,0, 0.3);

}


@keyframes MoveUpDown {
	0%, 100% {
		bottom:0;
	}
	50% {
		bottom:2em;
	}
}

@-webkit-keyframes MoveUpDown {
	0%, 100% {
		bottom:0;
	}
	50% {
		bottom:2em;
	}
}

::selection {
	color:white;
	background-color:var(--primary-color);
}

.dark ::selection {
	color:var(--primary-color);
	background-color:white;
}

body {
	font-family: var(--mainfont-regular);
	font-size:1.4em;

	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

b, strong {
    font-family: var(--mainfont-bold);
    font-weight:normal;
}

em {
    font-family: var(--mainfont-bold_italic);
    font-style:normal;
}

a:not(.carosell-link, .ps_dl_icon, .ps_dl_info) {
	text-decoration: underline;
	background: linear-gradient(0deg, var(--main-text-color), var(--main-text-color)) no-repeat right bottom / 0 var(--bg-h);
	transition: background-size 350ms;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	--bg-h: 100%;
}

a:where(:hover, :focus-visible):not(.carosell-link, .ps_dl_icon, .ps_dl_info) {
	text-decoration: none;
	color:white !important;
	background-size: 100% var(--bg-h);
	background-position-x: left;
}

.screen-reader-text:focus {
	font-weight: normal;
	background-color:#fff;
	padding:1em 2em;
	box-shadow: none;
	border:1px solid var(--main-text-color);
}

.image-box {
	border:5px solid white;
}

.kontakt-box p {
	line-height:1.3;
}

.back-to-top.active {
	mix-blend-mode: difference;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--mainfont-bold);
    font-weight:normal;
}

#masthead {
	display:none;
}

.absolute-footer,
.absolute-footer a {
	color:var(--highlight-color-4);
}

.col, .columns, .gallery-item {
	padding:0 30px 30px;
}

.flickity-slider {
	transform:initial !important;
}
.scroll-for-more {
	animation: MoveUpDown 2s ease-in-out infinite;
}

.ps_carousell {
	display:flex;
	align-items:center;
}

.slick-initialized .slick-track,
.slick-initialized .slick-slide.partner-logo {
	display:flex;
	align-items:center;
}
.partner-logo {
	max-width:200px;
	max-height:150px;
	padding:2em 0.75em;
}
.partner-logo img {
	object-fit: contain;
}

.slick-prev::before, .slick-next::before {
	color:rgba(0,0,0,0.75) !important;
}

.ps_dienstleistungen figure {
	position: relative;
	margin:0;
	overflow:hidden;
}
.ps_dienstleistungen figcaption {
	background-color:rgba(255,255,255,0.75);
	position: absolute;
	left:10px;
	right:10px;
	bottom:10px;
	transition: all 0.2s ease-in-out;
}
.ps_dienstleistungen figure:hover figcaption {
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.ps_dienstleistungen .ps_dl_icon {
	position: absolute;
	line-height: 1;
	padding:0.5em 1em 1em 0.5em;
	cursor: pointer;
	color:var(--highlight-color-2);
}
.ps_dienstleistungen .ps_dl_icon:hover {
	opacity: 0.75;
}
.ps_dienstleistungen .ps_dl_info {
	padding:0.5em;
	line-height: 1;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	cursor: pointer;
	color:var(--highlight-color-2);
	min-height: 39%;
}

.info-trigger {
	cursor: pointer;
}
.info-trigger img {
	object-fit: cover;
	width: 100%;
	aspect-ratio: 16/9;
}


.hidden-modal-content {
	display: none;
}
.ps_modal_open {
	overflow:hidden;
}
.modal-background {
	background-color:var(--dark-background-color);
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index: 1000;
}
.modal-close {
	color:var(--highlight-color-2);
	position: absolute;
	right:-2em;
	top:-2em;
	line-height: 1;
	cursor: pointer;
	padding:2em;
	z-index: 1;
	transition: all 0.2s ease-in-out;
}
.modal-close:hover {
	color:var(--highlight-color-3);
}
.modal-body .modal-close:before {
	font-size: 2em;
	width: auto;
	height: auto;
}
.modal-body {
	position: relative;
	width:100%;
	height:100%;
	max-width: 800px;
	min-height:300px;
	max-height:100vh;
	background-color:white;
	margin:0 auto;
	padding:2em;
	box-shadow: 0 0 10px var(--dark-background-color);
}
.modal-content {
	height:100%;
	overflow-y:auto;
	position: relative;
}
.modal-content:after {
	display:block;
	content: "";
	height: 10vh;
	width: 100%;
	position: sticky;
	bottom: 0;
	background: linear-gradient( 0deg, #fff, hsla(0, 0%, 100%, 0) );
}


@media only screen and (min-width: 550px) {
	.modal-body {
		max-height:80vmin;
		margin:10vh auto;
	}
}
@media only screen and (min-width: 850px) {
	.modal-body {
		max-height:70vmin;
	}
}