/* ==========================================================
   Bkomm Portfolio · Frontend
   1:1 nach dem Prototyp (style.css „ptile“ + pages.css „Portfolio-Tool“).
   Alles hängt an .bkp-portfolio bzw. .bkp-overlay – Divi/Theme greifen nicht hinein.
   Spalten, Höhen und Akzentfarbe kommen als CSS-Variablen aus dem Plugin.
   Schrift Poppins kommt von der Website (wird hier nicht geladen).
   ========================================================== */

.bkp-portfolio,
.bkp-overlay {
	--bkp-accent: #008C98;
	--bkp-ink: #636466;
	--bkp-line: #E0E0E1;
	--bkp-sand: #EFEFF0;
	--bkp-gelb: #FBBF62;
	--bkp-font: "Poppins", system-ui, sans-serif;
	--bkp-ease: cubic-bezier(.2, .75, .25, 1);
	--bkp-shadow-s: 0 1px 2px rgba(60, 61, 62, .06), 0 4px 14px -6px rgba(60, 61, 62, .12);
	--bkp-shadow-m: 0 2px 4px rgba(60, 61, 62, .05), 0 18px 40px -16px rgba(60, 61, 62, .22);
	--bkp-accent-l: color-mix(in srgb, var(--bkp-accent) 10%, #fff);
	--bkp-accent-d: color-mix(in srgb, var(--bkp-accent) 82%, #000);
	font-family: var(--bkp-font);
	color: var(--bkp-ink);
	-webkit-font-smoothing: antialiased;
}
.bkp-portfolio {
	--bkp-cols: 3;
	--bkp-cols-t: 2;
	--bkp-cols-m: 1;
	--bkp-gap: 20px;
	--bkp-tile-h: 385px;
	--bkp-img-h: 255px;
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.65;
	text-align: left;
}
.bkp-portfolio *,
.bkp-portfolio *::before,
.bkp-portfolio *::after,
.bkp-overlay *,
.bkp-overlay *::before,
.bkp-overlay *::after { box-sizing: border-box; }
.bkp-portfolio svg,
.bkp-overlay svg { display: block; flex: none; fill: none; }

/* ---------- Filter nach Leistungen ---------- */
.bkp-portfolio .bkp-filterbar {
	display: flex;
	align-items: center;
	gap: 14px 20px;
	flex-wrap: wrap;
	margin: 0 0 34px;
	padding: 0;
}
.bkp-portfolio .bkp-filterbar__lbl {
	font: 700 13px/1.65 var(--bkp-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bkp-accent);
}
.bkp-portfolio .bkp-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.bkp-portfolio .bkp-filter__btn {
	display: inline-block;
	margin: 0;
	font: 600 14.5px/normal var(--bkp-font);
	letter-spacing: normal;
	text-transform: none;
	color: var(--bkp-ink);
	background: #fff;
	border: 1.5px solid var(--bkp-line);
	border-radius: 999px;
	padding: 10px 18px;
	box-shadow: none;
	cursor: pointer;
	transition: all .25s var(--bkp-ease);
}
.bkp-portfolio .bkp-filter__btn:hover { border-color: var(--bkp-accent); background: #fff; color: var(--bkp-ink); }
.bkp-portfolio .bkp-filter__btn.is-on,
.bkp-portfolio .bkp-filter__btn.is-on:hover { background: var(--bkp-accent); border-color: var(--bkp-accent); color: #fff; }
.bkp-portfolio .bkp-filter__btn:focus-visible { outline: 3px solid var(--bkp-accent); outline-offset: 2px; }
.bkp-portfolio .bkp-filter__n { font-style: normal; opacity: .55; margin-left: 4px; font-weight: 500; }

/* ---------- Raster: alle Kacheln gleich groß ---------- */
.bkp-portfolio .bkp-grid {
	display: grid;
	grid-template-columns: repeat(var(--bkp-cols), minmax(0, 1fr));
	grid-auto-rows: var(--bkp-tile-h);
	gap: var(--bkp-gap);
	margin: 0;
	padding: 0;
}

/* ---------- Kachel: Bild oben, Text darunter auf Weiß – nichts verdeckt das Bild ---------- */
.bkp-portfolio .bkp-tile {
	--bkp-c: var(--bkp-accent);
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 26px;
	overflow: hidden;
	isolation: isolate;
	background: #fff;
	color: var(--bkp-ink);
	text-decoration: none;
	text-align: left;
	box-shadow: var(--bkp-shadow-s);
	cursor: pointer;
	transition: transform .5s var(--bkp-ease), box-shadow .5s var(--bkp-ease);
}
.bkp-portfolio .bkp-tile:hover { transform: translateY(-4px); box-shadow: var(--bkp-shadow-m); }
.bkp-portfolio .bkp-tile:focus-visible { outline: 3px solid var(--bkp-accent); outline-offset: 3px; }
.bkp-portfolio .bkp-tile--static { cursor: default; }
.bkp-portfolio .bkp-tile--static:hover { transform: none; box-shadow: var(--bkp-shadow-s); }
.bkp-portfolio .bkp-tile.is-hidden { display: none; }

.bkp-portfolio .bkp-tile .bkp-tile__img {
	position: relative;
	z-index: 0;
	flex: none;
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: var(--bkp-img-h) !important;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	background: var(--bkp-c);
	transition: transform 1s var(--bkp-ease);
}
.bkp-portfolio .bkp-tile:not(.bkp-tile--static):hover .bkp-tile__img { transform: scale(1.05); }

.bkp-portfolio .bkp-tile__lbl {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 16px 20px;
	background: #fff;
}
.bkp-portfolio .bkp-tile__txt { display: block; min-width: 0; }
.bkp-portfolio .bkp-tile__title {
	display: block;
	margin: 0;
	font: 700 17px/1.25 var(--bkp-font);
	letter-spacing: normal;
	color: var(--bkp-ink);
}
.bkp-portfolio .bkp-tile__task {
	display: block;
	margin-top: 3px;
	font: 400 13.5px/1.4 var(--bkp-font);
	color: var(--bkp-ink);
}
.bkp-portfolio .bkp-tile__award {
	display: inline-block;
	margin-left: 4px;
	vertical-align: 1px;
	white-space: nowrap;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--bkp-gelb);
	color: var(--bkp-ink);
	font: 700 11.5px/1.5 var(--bkp-font);
}
.bkp-portfolio .bkp-tile__go {
	align-self: center;
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--bkp-c);
	color: #fff;
	transition: transform .45s var(--bkp-ease);
}
.bkp-portfolio .bkp-tile__go svg { width: 16px; height: 16px; stroke: #fff; }
.bkp-portfolio .bkp-tile:hover .bkp-tile__go { transform: rotate(-45deg); }

/* ---------- „Mehr-Kachel“ (15+ weitere Projekte) ---------- */
.bkp-portfolio .bkp-more {
	justify-content: space-between;
	padding: 30px;
	background: var(--bkp-more-bg, #92C892) var(--bkp-more-img, none) 78% center / cover no-repeat;
	color: #fff;
}
.bkp-portfolio .bkp-more__top { display: block; }
.bkp-portfolio .bkp-more__num {
	display: block;
	font: 800 46px/1 var(--bkp-font);
	letter-spacing: -.03em;
	color: #fff;
}
.bkp-portfolio .bkp-more__txt {
	display: block;
	max-width: 150px;
	margin-top: 8px;
	font: 600 17px/1.35 var(--bkp-font);
	color: #fff;
}
.bkp-portfolio .bkp-more--plain .bkp-more__txt { max-width: 260px; }
.bkp-portfolio .bkp-more__btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: 999px;
	background: #fff;
	color: var(--bkp-ink);
	font: 600 16px/1 var(--bkp-font);
	transition: transform .35s var(--bkp-ease), box-shadow .35s var(--bkp-ease);
}
.bkp-portfolio .bkp-more__btn svg { width: 18px; height: 18px; stroke: currentColor; transition: transform .35s var(--bkp-ease); }
.bkp-portfolio div.bkp-more { cursor: default; }
.bkp-portfolio .bkp-more:hover .bkp-more__btn { transform: translateY(-2px); box-shadow: var(--bkp-shadow-m); }
.bkp-portfolio .bkp-more:hover .bkp-more__btn svg { transform: translateX(4px); }

/* ---------- Keine Treffer / Hinweise ---------- */
.bkp-portfolio .bkp-empty {
	margin: 0;
	padding: 40px 0 10px;
	text-align: center;
	font: 400 17px/1.65 var(--bkp-font);
	color: var(--bkp-ink);
}
.bkp-portfolio .bkp-empty[hidden] { display: none; }
.bkp-portfolio .bkp-empty a { color: var(--bkp-accent); font-weight: 600; text-decoration: underline; }
.bkp-portfolio .bkp-live {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0 !important;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bkp-admin-empty { padding: 16px 20px; border: 2px dashed #c3c4c7; border-radius: 12px; color: #636466; }

/* ---------- Einblenden beim Scrollen (nur mit JavaScript) ---------- */
.bkp-portfolio.bkp-js .bkp-tile:not(.is-in) { opacity: 0; }
.bkp-portfolio.bkp-js .bkp-tile.is-in { animation: bkp-rise .9s var(--bkp-ease) var(--bkp-d, 0s) backwards; }
@keyframes bkp-rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.bkp-portfolio .bkp-grid { grid-template-columns: repeat(var(--bkp-cols-t), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.bkp-portfolio .bkp-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
	.bkp-portfolio .bkp-filter::-webkit-scrollbar { display: none; }
	.bkp-portfolio .bkp-filter__btn { white-space: nowrap; flex: none; }
	.bkp-portfolio .bkp-tile__title { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 600px) {
	.bkp-portfolio .bkp-filterbar { gap: 10px; }
	.bkp-portfolio .bkp-grid { grid-template-columns: repeat(var(--bkp-cols-m), minmax(0, 1fr)); }
}
@media (max-width: 400px) {
	.bkp-portfolio .bkp-filter { margin-inline: -16px; padding-inline: 16px; }
}

/* ==========================================================
   Projekt-Popup: Galerie oben, Infotext + Steckbrief darunter
   ========================================================== */
html.bkp-lock,
html.bkp-lock body { overflow: hidden !important; }

.bkp-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000002; /* über Divi-Header und Divi-Popups */
	display: flex;
	padding: 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: rgba(60, 61, 62, .6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility 0s .3s;
	font-size: 17px;
	line-height: 1.65;
	text-align: left;
}
.bkp-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }

.bkp-overlay .bkp-modal {
	--bkp-c: var(--bkp-accent);
	position: relative;
	width: min(1080px, 100%);
	margin: auto;
	padding: 0;
	background: #fff;
	border-radius: 36px;
	overflow: hidden;
	transform: translateY(18px) scale(.985);
	transition: transform .4s var(--bkp-ease);
}
.bkp-overlay.is-open .bkp-modal { transform: none; }

.bkp-overlay button { font-family: var(--bkp-font); text-transform: none; letter-spacing: normal; box-shadow: none; }
.bkp-overlay p { padding: 0; }

.bkp-overlay .bkp-modal__x {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--bkp-ink);
	cursor: pointer;
	transition: transform .3s var(--bkp-ease);
}
.bkp-overlay .bkp-modal__x svg { width: 20px; height: 20px; stroke: currentColor; transform: rotate(45deg); }
.bkp-overlay .bkp-modal__x:hover { transform: rotate(90deg); }
.bkp-overlay :focus-visible { outline: 3px solid var(--bkp-accent); outline-offset: 2px; }

/* Medien oben: wischbare Bildleiste (Scroll-Snap) */
.bkp-overlay .bkp-media { position: relative; background: color-mix(in srgb, var(--bkp-c) 16%, #fff); }
.bkp-overlay .bkp-media__track {
	display: flex;
	height: clamp(260px, 56vh, 560px);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.bkp-overlay .bkp-media__track::-webkit-scrollbar { display: none; }
.bkp-overlay .bkp-media__slide {
	flex: 0 0 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 76px;
	scroll-snap-align: center;
}
.bkp-overlay .bkp-media__slide img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0;
	object-fit: contain;
	border-radius: 10px;
}
.bkp-overlay .bkp-media__nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--bkp-ink);
	cursor: pointer;
	transition: transform .3s var(--bkp-ease), opacity .3s;
}
.bkp-overlay .bkp-media__nav svg { width: 20px; height: 20px; stroke: currentColor; }
.bkp-overlay .bkp-media__nav--p { left: 16px; }
.bkp-overlay .bkp-media__nav--p svg { transform: rotate(180deg); }
.bkp-overlay .bkp-media__nav--n { right: 16px; }
.bkp-overlay .bkp-media__nav:hover { transform: scale(1.08); }
.bkp-overlay .bkp-media__nav:disabled { opacity: 0; pointer-events: none; }
.bkp-overlay .bkp-media__count {
	position: absolute;
	left: 18px;
	bottom: 16px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #fff;
	color: var(--bkp-ink);
	font: 700 13px/1.65 var(--bkp-font);
}
.bkp-overlay .bkp-media__count[hidden],
.bkp-overlay .bkp-media__thumbs[hidden],
.bkp-overlay .bkp-modal__pn[hidden],
.bkp-overlay [hidden] { display: none !important; }
.bkp-overlay .bkp-media__thumbs {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 12px 18px;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--bkp-line);
}
.bkp-overlay .bkp-media__thumbs::-webkit-scrollbar { display: none; }
.bkp-overlay .bkp-media__thumbs button {
	flex: 0 0 auto;
	width: 76px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bkp-sand);
	opacity: .55;
	cursor: pointer;
	transition: opacity .25s, border-color .25s;
}
.bkp-overlay .bkp-media__thumbs button img { display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0; object-fit: cover; }
.bkp-overlay .bkp-media__thumbs button.is-on { opacity: 1; border-color: var(--bkp-c); }

/* Infos darunter */
.bkp-overlay .bkp-modal__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	gap: 48px;
	padding: 38px 44px 34px;
}
.bkp-overlay .bkp-modal__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.bkp-overlay .bkp-modal__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--bkp-sand);
	color: var(--bkp-ink);
	font: 600 13px/1.65 var(--bkp-font);
}
.bkp-overlay button.bkp-modal__tag { cursor: pointer; }
.bkp-overlay .bkp-modal__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bkp-c); }
.bkp-overlay button.bkp-modal__tag:hover { background: var(--bkp-accent-l); }
.bkp-overlay .bkp-modal__title {
	margin: 0;
	padding: 0;
	font: 800 clamp(26px, 3vw, 36px)/1.12 var(--bkp-font);
	letter-spacing: -.025em;
	color: var(--bkp-ink);
	text-transform: none;
}
.bkp-overlay .bkp-modal__task { margin: 8px 0 18px; padding: 0; font: 600 17px/1.65 var(--bkp-font); color: var(--bkp-accent); }
.bkp-overlay .bkp-modal__text { margin: 0; font: 400 17px/1.65 var(--bkp-font); color: var(--bkp-ink); }
.bkp-overlay .bkp-modal__text p { margin: 0 0 1em; padding: 0; font: inherit; color: inherit; }
.bkp-overlay .bkp-modal__text p:last-child { margin-bottom: 0; }
.bkp-overlay .bkp-modal__text a { color: var(--bkp-accent); }

.bkp-overlay .bkp-modal__facts { align-self: start; padding: 24px; border-radius: 26px; background: var(--bkp-sand); }
.bkp-overlay .bkp-modal__facts dl { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; }
.bkp-overlay .bkp-modal__facts dl:last-child { margin-bottom: 0; }
.bkp-overlay .bkp-modal__facts dl > div { margin: 0; padding: 0; }
.bkp-overlay .bkp-modal__facts dt {
	margin: 0;
	padding: 0;
	font: 700 12px/1.65 var(--bkp-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bkp-accent);
}
.bkp-overlay .bkp-modal__facts dd { margin: 2px 0 0; padding: 0; font: 600 15px/1.4 var(--bkp-font); color: var(--bkp-ink); }
.bkp-overlay .bkp-modal__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 16px 14px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--bkp-accent);
	color: #fff;
	font: 600 15px/1.2 var(--bkp-font);
	text-align: center;
	text-decoration: none;
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--bkp-accent) 70%, transparent);
	transition: transform .35s var(--bkp-ease), box-shadow .35s var(--bkp-ease), background .25s;
}
.bkp-overlay .bkp-modal__btn svg { width: 16px; height: 16px; stroke: currentColor; transition: transform .35s var(--bkp-ease); }
.bkp-overlay .bkp-modal__btn:hover { background: var(--bkp-accent-d); color: #fff; transform: translateY(-2px); }
.bkp-overlay .bkp-modal__btn:hover svg { transform: translateX(4px); }

.bkp-overlay .bkp-modal__pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--bkp-line); }
.bkp-overlay .bkp-modal__pn button {
	margin: 0;
	padding: 20px 44px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--bkp-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .25s;
}
.bkp-overlay .bkp-modal__pn button + button { text-align: right; border-left: 1px solid var(--bkp-line); }
.bkp-overlay .bkp-modal__pn button:hover { background: var(--bkp-sand); }
.bkp-overlay .bkp-modal__pn small { display: block; font: 400 12.5px/1.65 var(--bkp-font); color: var(--bkp-ink); }
.bkp-overlay .bkp-modal__pn b { display: block; margin-top: 2px; font: 700 16px/1.3 var(--bkp-font); color: var(--bkp-ink); }

@media (max-width: 980px) {
	.bkp-overlay .bkp-modal__body { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 767px) {
	.bkp-overlay .bkp-modal__title { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 600px) {
	.bkp-overlay { padding: 0; }
	.bkp-overlay .bkp-modal { border-radius: 0; min-height: 100%; }
	.bkp-overlay .bkp-media__track { height: 46vh; }
	.bkp-overlay .bkp-media__slide { padding: 16px; }
	.bkp-overlay .bkp-media__nav { display: none; }
	.bkp-overlay .bkp-modal__body { padding: 26px 20px 22px; }
	.bkp-overlay .bkp-modal__pn button { padding: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.bkp-overlay .bkp-media__track { scroll-behavior: auto; }
	.bkp-overlay .bkp-modal,
	.bkp-overlay { transition: none; }
	.bkp-portfolio .bkp-tile,
	.bkp-portfolio .bkp-tile__img,
	.bkp-portfolio .bkp-tile__go { transition: none; }
	.bkp-portfolio.bkp-js .bkp-tile:not(.is-in) { opacity: 1; }
	.bkp-portfolio.bkp-js .bkp-tile.is-in { animation: none; }
}

/* Vorschau im Divi-Builder: keine Einblend-Animation */
.bkp-vb-preview .bkp-tile { opacity: 1 !important; animation: none !important; }
.bkp-vb-preview.is-loading { opacity: .6; transition: opacity .2s; }