/* ==========================================================================
   tijanapermoser.de – statische Version
   Ergänzt theme.min.css (OnePress, GPL) um die früheren WordPress-Einstellungen
   (Customizer, Zusätzliches CSS), die Portfolio-Galerie und das Kontaktformular.
   ========================================================================== */

:root {
	--wp--preset--color--primary: #30a3b3;
	--wp--preset--color--secondary: #302f2f;
	--wp--style--global--content-size: 790px;
	--eg-overlay: rgba(72, 72, 72, .7);
	--eg-expand-bg: #222222;
	--eg-gap: 10px;
}

/* --- OnePress Customizer-Ausgabe --------------------------------------- */
.hero-slideshow-wrapper:after {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, .3); display: block; content: "";
}
#parallax-hero .jarallax-container .parallax-bg:before,
#parallax-hero > .parallax-bg::before { background-color: rgba(0, 0, 0, .3); opacity: 1; }

a, .onepress-menu a:hover, .onepress-menu ul li a:hover,
.onepress-menu li.onepress-current-item > a, .onepress-menu ul li.current-menu-item > a,
.onepress-menu > li a.menu-actived, .onepress-menu.onepress-menu-mobile li.onepress-current-item > a,
.site-footer a, .site-footer .footer-social a:hover, .site-footer .btt a:hover, .highlight,
.btn-theme-primary-outline, .section-services .service-item .service-image i,
.counter_item .counter__number, .icon-background-default {
	color: var(--wp--preset--color--primary);
}
input[type="reset"], input[type="submit"], .btn-theme-primary, .btn-theme-primary-outline:hover {
	background: var(--wp--preset--color--primary);
}
.btn-theme-primary-outline, .btn-theme-primary-outline:hover, .entry-content blockquote {
	border-color: var(--wp--preset--color--primary);
}
.feature-item { --icon-bg-color: var(--wp--preset--color--primary); --icon-hover-bg-color: var(--wp--preset--color--secondary); }
.feature-item:hover .icon-background-default { color: var(--wp--preset--color--secondary); }
.hero-content-style1 .morphext { color: #fff; }

/* --- Früheres "Zusätzliches CSS" --------------------------------------- */
.hero-small-text > p { font-style: normal; }
#dienstleistungen .service-title { text-align: left; }
#arbeitsproben { z-index: 10; overflow: unset; }

/* --- Rechtliche Seiten -------------------------------------------------- */
.page-header { padding: 40px 0 30px; background: #f8f9f9; border-bottom: 1px solid #e9e9e9; }
.page-header .entry-title { margin: 0; }
.legal .entry-content { max-width: var(--wp--style--global--content-size); margin: 0 auto; padding: 50px 0 70px; }
.legal .entry-content h2 { margin-top: 2em; }
.legal .entry-content h3 { margin-top: 1.5em; }

/* ==========================================================================
   Portfolio – Nachbau des früheren "Elastic Grid" (Portfolio Gallery Plugin)
   ========================================================================== */
.eg { padding-top: 10px; }

.eg-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--eg-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 400px));
	justify-content: center;
}
.eg-item { margin: 0; animation: eg-pop .4s ease both; }
.eg-item[hidden] { display: none; }
@keyframes eg-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

.eg-thumb {
	position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
	aspect-ratio: 1 / 1; overflow: hidden; background: #313131;
}
.eg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.eg-thumb .eg-cap {
	position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
	padding: 40px 15px 0; background: var(--eg-overlay); opacity: 0; transition: opacity .3s;
}
.eg-thumb .eg-cap span {
	color: #fff; font-size: 16px; text-align: center;
	border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 10px 0;
}
.eg-thumb:hover .eg-cap, .eg-thumb:focus-visible .eg-cap { opacity: 1; }
.eg-thumb:hover img { transform: scale(1.04); }
.eg-item.is-open .eg-thumb::after {
	content: ""; position: absolute; left: 50%; bottom: -1px; margin-left: -15px;
	border: 15px solid transparent; border-bottom-color: var(--eg-expand-bg);
}

/* Aufklappbereich */
.eg-expander {
	grid-column: 1 / -1; background: var(--eg-expand-bg); color: #fff;
	position: relative; overflow: hidden; animation: eg-open .5s ease both;
}
@keyframes eg-open { from { max-height: 0; } to { max-height: 1200px; } }
.eg-expander-inner { display: flex; gap: 30px; padding: 30px; min-height: 500px; }
.eg-close {
	position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
	background: none; border: 0; cursor: pointer; color: #999; font-size: 28px; line-height: 1;
}
.eg-close:hover { color: #fff; }
.eg-fullimg { flex: 1 1 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; }
.eg-fullimg img.eg-main { max-width: 100%; max-height: 440px; object-fit: contain; cursor: zoom-in; }
.eg-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.eg-thumbs button {
	width: 100px; height: 100px; padding: 0; border: 2px solid transparent; background: #313131; cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5); opacity: .6; transition: opacity .2s;
}
.eg-thumbs button.is-active, .eg-thumbs button:hover { opacity: 1; border-color: #fff; }
.eg-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eg-details { flex: 1 1 50%; text-align: left; overflow: auto; padding-right: 30px; }
.eg-details h3 { color: #d6d6d6; font-size: 35px; line-height: 1.2; margin: 0 0 20px; font-weight: 300; }
.eg-details .eg-desc, .eg-details .eg-desc p { color: #fff; font-size: 16px; line-height: 22px; }
.eg-details .eg-desc strong { color: #d6d6d6; }

/* Lightbox */
.eg-lightbox {
	position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .9);
	display: flex; align-items: center; justify-content: center;
}
.eg-lightbox[hidden] { display: none; }
.eg-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.eg-lightbox button {
	position: absolute; background: none; border: 0; color: #ccc; cursor: pointer; font-size: 42px; line-height: 1; padding: 10px 16px;
}
.eg-lightbox button:hover { color: #fff; }
.eg-lb-close { top: 10px; right: 10px; }
.eg-lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.eg-lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.eg-lb-count { position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; color: #ccc; font-size: 14px; }

@media (max-width: 767px) {
	.eg-expander-inner { flex-direction: column; min-height: 0; padding: 50px 16px 20px; }
	.eg-details { padding-right: 0; }
	.eg-details h3 { font-size: 26px; }
	.eg-thumbs button { width: 64px; height: 64px; }
}

/* ==========================================================================
   Kontaktformular (Optik wie zuvor WPForms im OnePress-Theme)
   ========================================================================== */
.kf { margin: 0; }
.kf-field { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.kf-label, .kf-sublabel {
	display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
	line-height: 1.3; padding: 0; color: rgba(0, 0, 0, .85);
}
.kf-label { margin: 0 0 8px; }
.kf-sublabel { margin-top: 5px; color: rgba(0, 0, 0, .55); }
.kf-req { color: #d63637; }
.kf-row { display: flex; gap: 20px; }
.kf-half { flex: 1 1 50%; min-width: 0; }
.kf input[type="text"], .kf input[type="email"], .kf textarea {
	display: block; width: 100%; max-width: 100%; height: auto;
	background-color: #f2f2f2; border: 0; border-bottom: 1px solid #fff; border-radius: 0;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); box-sizing: border-box;
	color: #000; font: inherit; font-size: 15px; font-weight: 400; line-height: 22px; padding: 10px;
	transition: all .2s linear;
}
.kf textarea { min-height: 215px; max-height: none; resize: vertical; }
.kf input:hover, .kf input:focus, .kf textarea:hover, .kf textarea:focus { background: #e9e9e9; outline: none; }
.kf .is-invalid { box-shadow: inset 0 0 0 1px #d63637; }
.kf-error { display: block; color: #d63637; font-size: 14px; font-style: normal; margin-top: 5px; }
.kf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kf-submit button {
	display: block; width: 100%; margin: 3px 0; padding: 15px 23px; cursor: pointer;
	background-color: #36a3b3; color: #fff; border: 0; border-radius: 2px;
	box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
	font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 1px; line-height: 1; text-transform: uppercase;
}
.kf-submit button:hover { opacity: .8; }
.kf-submit button[disabled] { opacity: .6; cursor: wait; }
.kf-status:empty { display: none; }
.kf-status { margin-top: 15px; padding: 12px 15px; border-radius: 3px; font-size: 16px; }
.kf-status.is-ok { background: #e0ffc7; border: 1px solid #b4d39b; color: #333; }
.kf-status.is-error { background: #ffe5e5; border: 1px solid #d63637; color: #333; }

@media (max-width: 600px) {
	.kf-row { flex-direction: column; gap: 10px; }
}