/* ==========================================================
   Bkomm Team-Kacheln · Frontend
   Farben/Spalten kommen als CSS-Variablen aus dem Plugin.
   ========================================================== */

.bkt-grid {
	--bkt-cols: 4;
	--bkt-cols-t: 2;
	--bkt-cols-m: 1;
	--bkt-gap: 32px;
	--bkt-ratio: 1/1;
	--bkt-accent: #008a91;
	--bkt-ink: #0f2a36;
	--bkt-name: #4d4d4d;
	--bkt-ease: cubic-bezier(.2, .75, .25, 1);
	display: grid;
	grid-template-columns: repeat(var(--bkt-cols), minmax(0, 1fr));
	gap: var(--bkt-gap);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.bkt-grid *,
.bkt-overlay * { box-sizing: border-box; }

@media (max-width: 980px) {
	.bkt-grid { grid-template-columns: repeat(var(--bkt-cols-t), minmax(0, 1fr)); gap: min(var(--bkt-gap), 24px); }
}
@media (max-width: 600px) {
	.bkt-grid { grid-template-columns: repeat(var(--bkt-cols-m), minmax(0, 1fr)); gap: min(var(--bkt-gap), 16px); }
}

/* ---------- Kachel ---------- */
.bkt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	background: #fff;
	border: 1px solid #dedede;
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
	text-align: left;
	transition: transform .4s var(--bkt-ease), border-color .3s ease, box-shadow .4s var(--bkt-ease);
}
.bkt-card:not(.bkt-card--static) { cursor: pointer; }

.bkt-card__media {
	position: relative;
	aspect-ratio: var(--bkt-ratio);
	overflow: hidden;
	background: #ebe6dc;
}
/* Nur Bild: das Bild füllt die ganze Kachel – kein weißer Rest, auch wenn Nachbarn höher sind */
.bkt-card--image-only .bkt-card__media { flex: 1 1 auto; }

.bkt-card .bkt-card__img,
.bkt-modal .bkt-modal__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: var(--bkt-focus, 50% 20%);
}
.bkt-card .bkt-card__img {
	transform-origin: 50% 35%;
	transition: transform .7s var(--bkt-ease);
}

/* Optionaler Farbfilter (Graustufen × Farbe, wie die bestehenden Bkomm-Porträts) */
.bkt-has-tint img { filter: grayscale(1) brightness(1.12) contrast(1.05); }
.bkt-has-tint::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--bkt-tint);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.bkt-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--bkt-tint, var(--bkt-accent));
	color: rgba(255, 255, 255, .92);
	font: 800 clamp(28px, 5vw, 56px)/1 "Poppins", sans-serif;
	letter-spacing: .02em;
}

/* Abteilungs-Badge */
.bkt-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - 24px);
	padding: 7px 13px;
	border-radius: 999px;
	background: #fff;
	color: var(--bkt-accent);
	font: 600 12px/1.2 "Poppins", sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 2px 10px rgba(15, 42, 54, .08);
	pointer-events: none;
}

/* "+"-Hinweis: zeigt, dass man klicken kann */
.bkt-card__more {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bkt-accent);
	color: #fff;
	box-shadow: 0 6px 16px rgba(15, 42, 54, .25);
	opacity: 0;
	transform: translateY(10px) scale(.8);
	transition: opacity .3s ease, transform .4s var(--bkt-ease);
	pointer-events: none;
}
.bkt-card__more svg { width: 20px; height: 20px; }

/* Textbereich */
.bkt-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 16px 20px 20px;
}
.bkt-card .bkt-card__name {
	margin: 0;
	padding: 0;
	color: var(--bkt-name);
	font: 800 17px/1.3 "Poppins", sans-serif;
	letter-spacing: 0;
	text-transform: none;
}
.bkt-card__contact {
	margin: 14px 0 0 !important;
	padding: 16px 0 0 !important;
	border-top: 1px solid #d3d3d3;
}

/* Kontaktliste (Kachel + Popup) */
.bkt-contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none !important;
}
.bkt-contact li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	line-height: 1.35;
}
.bkt-contact li::before { content: none !important; }
.bkt-contact a {
	position: relative;
	z-index: 3; /* über dem unsichtbaren Klickbereich der Kachel */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	color: #333;
	font-size: 15px;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color .2s ease;
}
.bkt-contact a:hover,
.bkt-contact a:focus-visible { color: var(--bkt-accent); }
.bkt-contact svg { flex: none; width: 18px; height: 18px; color: var(--bkt-accent); }

/* Unsichtbarer Button über der ganzen Kachel (Klick + Tastatur) */
.bkt-card .bkt-card__open {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.bkt-card .bkt-card__open:focus { outline: none; }
.bkt-card .bkt-card__open:focus-visible { outline: 3px solid var(--bkt-accent); outline-offset: -3px; }
.bkt-card .bkt-card__open::before,
.bkt-card .bkt-card__open::after { display: none; }

/* ---------- Hover-Animation ---------- */
.bkt-grid--hover .bkt-card:not(.bkt-card--static):hover,
.bkt-grid--hover .bkt-card:not(.bkt-card--static):focus-within {
	border-color: var(--bkt-accent);
	transform: translateY(-8px);
	box-shadow: 0 22px 40px -20px rgba(15, 42, 54, .45);
}
.bkt-grid--hover .bkt-card:not(.bkt-card--static):hover .bkt-card__img,
.bkt-grid--hover .bkt-card:not(.bkt-card--static):focus-within .bkt-card__img {
	transform: scale(1.07) translate(1.5%, -1.5%);
}
.bkt-grid--hover .bkt-card:not(.bkt-card--static):hover .bkt-card__more,
.bkt-grid--hover .bkt-card:not(.bkt-card--static):focus-within .bkt-card__more {
	opacity: 1;
	transform: none;
}
/* Touch-Geräte haben kein Hover → Hinweis dauerhaft, etwas kleiner */
@media (hover: none) {
	.bkt-card:not(.bkt-card--static) .bkt-card__more { opacity: .95; transform: scale(.85); }
}

/* Telefonnummern nie mitten in der Nummer umbrechen */
.bkt-contact a[href^="tel:"] { white-space: nowrap; overflow-wrap: normal; }

/* Schmale Kacheln (z. B. 5 pro Reihe oder 2 auf dem Handy): alles etwas kompakter */
.bkt-card { container-type: inline-size; }
@container (max-width: 250px) {
	.bkt-card__body { padding: 14px 14px 16px; }
	.bkt-card .bkt-card__name { font-size: 15px; }
	.bkt-card__contact { margin-top: 12px !important; padding-top: 12px !important; gap: 6px; }
	.bkt-card .bkt-contact a { font-size: 13px; gap: 7px; }
	.bkt-card .bkt-contact svg { width: 15px; height: 15px; }
	.bkt-badge { top: 10px; left: 10px; padding: 6px 11px; font-size: 11px; }
	.bkt-card__more { width: 34px; height: 34px; right: 10px; bottom: 10px; }
}
@container (max-width: 190px) {
	.bkt-card .bkt-contact a { font-size: 11.5px; }
	.bkt-card .bkt-contact a[href^="tel:"] { white-space: normal; } /* sehr schmal: nur an Leerzeichen umbrechen */
}

.bkt-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Vorschau im Divi-Builder */
.bkt-vb-preview { transition: opacity .2s ease; }
.bkt-vb-preview.is-loading { opacity: .55; }
.bkt-vb-preview a { pointer-events: none; }

/* ==========================================================
   Popup
   ========================================================== */
html.bkt-lock,
html.bkt-lock body { overflow: hidden !important; }

.bkt-overlay {
	--bkt-accent: #008a91;
	--bkt-ink: #0f2a36;
	position: fixed;
	inset: 0;
	z-index: 1000001; /* über Divi-Header und Divi-Popups */
	display: flex;
	padding: 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: rgba(15, 25, 30, .58);
	-webkit-backdrop-filter: blur(8px) saturate(.9);
	backdrop-filter: blur(8px) saturate(.9);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.bkt-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease;
}

.bkt-modal {
	position: relative;
	width: min(760px, 100%);
	margin: auto;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
	text-align: left;
	transform: translateY(18px) scale(.98);
	transition: transform .35s cubic-bezier(.2, .75, .25, 1);
}
.bkt-overlay.is-open .bkt-modal { transform: none; }

/* Foto-Bereich (Grundform = Foto oben; „links“ siehe weiter unten) */
.bkt-modal__media {
	position: relative;
	height: clamp(260px, 44vh, 420px);
	overflow: hidden;
	background: #ebe6dc;
}
.bkt-modal__media .bkt-badge {
	top: 22px;
	left: 22px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 700;
}

.bkt-modal__body { padding: 34px 44px 40px; }

/* Badge im Textbereich: nur sichtbar, wenn kein Foto gezeigt wird */
.bkt-modal .bkt-badge--inline {
	position: static;
	display: none;
	max-width: calc(100% - 56px); /* Platz für den Schließen-Button */
	margin: 0 0 16px;
	padding: 8px 16px;
	background: #d6ecec;
	font-size: 14px;
	font-weight: 700;
	box-shadow: none;
}
.bkt-modal--no-image .bkt-badge--inline { display: inline-block; }
.bkt-modal--no-image .bkt-modal__body { padding-top: 30px; }

.bkt-modal .bkt-modal__name {
	margin: 0;
	padding: 0;
	color: var(--bkt-ink);
	font: 800 clamp(26px, 3.4vw, 34px)/1.12 "Poppins", sans-serif;
	letter-spacing: 0;
	text-transform: none;
}
.bkt-modal .bkt-modal__role {
	margin: 6px 0 0;
	padding: 0;
	color: var(--bkt-accent);
	font: 600 15px/1.4 "Poppins", sans-serif;
}
.bkt-modal__text {
	margin-top: 16px;
	color: #5c6b72;
	font-size: 16.5px;
	line-height: 1.6;
}
.bkt-modal__text p { margin: 0 0 .8em; padding: 0; }
.bkt-modal__text p:last-child { margin-bottom: 0; }
.bkt-modal__text a { color: var(--bkt-accent); }

.bkt-modal .bkt-modal__subtitle {
	margin: 28px 0 12px;
	padding: 0;
	color: var(--bkt-accent);
	font: 800 13px/1.2 "Poppins", sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.bkt-modal__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.bkt-modal__tags li {
	margin: 0 !important;
	padding: 9px 16px !important;
	border-radius: 999px;
	background: #f1efe7;
	color: var(--bkt-ink);
	font: 600 14px/1.2 "Poppins", sans-serif;
	list-style: none !important;
}
.bkt-modal__tags li::before { content: none !important; }

.bkt-modal__contact {
	gap: 14px;
	margin: 28px 0 0 !important;
	padding: 22px 0 0 !important;
	border-top: 1px solid #ececec;
}
.bkt-modal__contact a { color: var(--bkt-ink); font-size: 17px; gap: 12px; }
.bkt-modal__contact svg { width: 21px; height: 21px; }

.bkt-modal .bkt-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--bkt-ink);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
	cursor: pointer;
	transition: background .2s ease, transform .25s ease;
}
.bkt-modal .bkt-modal__close:hover { background: #fff; transform: rotate(90deg); }
.bkt-modal .bkt-modal__close:focus-visible { outline: 3px solid var(--bkt-accent); outline-offset: 2px; }
.bkt-modal .bkt-modal__close svg { width: 20px; height: 20px; }

/* Foto links, Text rechts (Standard ab 900 px) – Foto wird nicht mehr oben/unten abgeschnitten */
@media (min-width: 900px) {
	.bkt-modal--left:not(.bkt-modal--no-image) {
		display: grid;
		grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
		width: min(1000px, 100%);
	}
	.bkt-modal--left .bkt-modal__media {
		height: auto;
		min-height: 440px; /* annähernd quadratisch – passt zu den Porträts */
	}
	.bkt-modal--left .bkt-modal__body {
		align-self: center;
		padding: 48px 52px 46px 48px;
	}
	.bkt-modal--left .bkt-modal__name { padding-right: 40px; } /* nicht unter den Schließen-Button laufen */
}

/* Handy + kleine Tablets */
@media (max-width: 899px) {
	.bkt-overlay { padding: 12px; }
	.bkt-modal { border-radius: 18px; }
	.bkt-modal__media { height: clamp(220px, 38vh, 320px); }
	.bkt-modal__media .bkt-badge { top: 14px; left: 14px; padding: 7px 13px; font-size: 13px; }

	/* Standard: kein Foto im Popup, Badge oben links */
	.bkt-modal--mobile-no-image .bkt-modal__media { display: none; }
	.bkt-modal--mobile-no-image .bkt-badge--inline { display: inline-block; }

	.bkt-modal__body { padding: 22px 22px 26px; }
	.bkt-modal .bkt-badge--inline { padding: 7px 13px; font-size: 13px; margin-bottom: 14px; }
	.bkt-modal--mobile-no-image .bkt-modal__body,
	.bkt-modal--no-image .bkt-modal__body { padding-top: 18px; }
	.bkt-modal--mobile-no-image .bkt-modal__name,
	.bkt-modal--no-image .bkt-modal__name { padding-right: 0; }
	.bkt-modal__text { font-size: 15px; }
	.bkt-modal .bkt-modal__subtitle { margin-top: 22px; }
	.bkt-modal__tags li { padding: 7px 13px !important; font-size: 13px; }
	.bkt-modal__contact { margin-top: 22px !important; padding-top: 18px !important; }
	.bkt-modal__contact a { font-size: 15px; }
	.bkt-modal .bkt-modal__close { top: 12px; right: 12px; width: 36px; height: 36px; }
	.bkt-modal--mobile-no-image .bkt-modal__close,
	.bkt-modal--no-image .bkt-modal__close { top: 14px; box-shadow: none; background: #f1efe7; }
}

@media (prefers-reduced-motion: reduce) {
	.bkt-card,
	.bkt-card .bkt-card__img,
	.bkt-card__more,
	.bkt-overlay,
	.bkt-modal { transition: none !important; }
	.bkt-grid--hover .bkt-card:hover,
	.bkt-grid--hover .bkt-card:hover .bkt-card__img { transform: none !important; }
}