/* Org Chart Builder – Frontend-Darstellung (klassischer CSS-Baum, Top-Down) */

.ocb-orgchart-wrapper {
	width: 100%;
	overflow-x: auto;
	padding: 20px 10px 40px;
	box-sizing: border-box;
}

/*
 * Klick-und-Zieh-Navigation im Frontend (siehe ocb-frontend.js): auf eine
 * freie Fläche klicken und die Maus nach links/rechts ziehen, um bei
 * breiten Organigrammen zu navigieren, ohne den Scrollbalken suchen zu
 * müssen. Nur für die Frontend-Ansicht (".ocb-frontend-view") – der
 * Admin-Editor hat seine eigene, unabhängige Pan-Funktion samt eigenem
 * Cursor-Hinweis in ocb-admin.css.
 */
.ocb-frontend-view {
	cursor: grab;
}

.ocb-frontend-view.ocb-panning {
	cursor: grabbing;
	user-select: none;
}

.ocb-notice {
	padding: 10px 14px;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 4px;
	color: #664d03;
	font-size: 14px;
}

.ocb-chart,
.ocb-chart ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/*
 * WICHTIG: "li"/"ul" sind hier reine Layout-/Linien-Container (für die
 * Baum-Verbindungslinien), nie selbst interaktiv. Da jede Box per
 * "flex: 1" gleich breit aufgeteilt wird, kann eine Box (mit eigenem
 * min-width) bei bestimmten Geschwister-Anzahlen breiter werden als ihr
 * zugewiesener Platz und dadurch in den Bereich benachbarter "li"
 * hineinragen. Ohne diese Regel "gewinnt" dann manchmal das benachbarte
 * "li" (bzw. dessen unsichtbarer Klickbereich) den Klick, statt der
 * eigentlich sichtbaren Box darunter – das Eingabefeld bekommt nie den
 * Fokus und fühlt sich "gesperrt" an, obwohl optisch alles normal
 * aussieht. Indem "li"/"ul" für Zeigerereignisse komplett durchlässig
 * gemacht werden (und nur die eigentliche Box sie wieder entgegennimmt),
 * geht ein Klick immer an die Box, unabhängig von solchen
 * Überlappungen.
 */
.ocb-chart li,
.ocb-chart ul {
	pointer-events: none;
}

.ocb-chart .ocb-node {
	pointer-events: auto;
}

.ocb-chart {
	display: flex;
	justify-content: center;
	min-width: max-content;
}

.ocb-chart ul {
	display: flex;
	padding-top: 40px;
	/*
	 * Ohne dies kennt eine verschachtelte Zeile (die Kinder einer Box)
	 * nur die Breite, die ihr die umgebende "li" zuteilt – und NICHT die
	 * Breite, die ihre eigenen Kinder tatsächlich brauchen. Bei 5 und
	 * mehr Boxen auf einer Ebene reicht die zugeteilte Breite dann nicht
	 * mehr aus: die Boxen überlappen sich, statt dass sich das ganze
	 * Organigramm (und sein Scroll-Bereich) entsprechend verbreitert.
	 * "min-width: max-content" sorgt dafür, dass jede Zeile ihre wahre
	 * benötigte Breite nach oben an ihre Eltern-Box durchreicht.
	 */
	min-width: max-content;
}

.ocb-chart li {
	flex: 1;
	text-align: center;
	list-style: none;
	position: relative;
	padding: 40px 12px 0;
	/*
	 * "min-width: 150px" (ein fester Wert) hätte hier Vorrang vor der
	 * eigentlich benötigten Breite einer verschachtelten Unter-Ebene und
	 * liesse die Box-Zeile künstlich schrumpfen (siehe Kommentar bei
	 * ".ocb-chart ul" oben) – "max-content" sorgt stattdessen dafür, dass
	 * jede Box (und ihr gesamter Unterbaum) immer mindestens ihre eigene
	 * tatsächlich benötigte Breite bekommt.
	 */
	min-width: max-content;
}

/* Verbindungslinien zwischen den Ebenen */
.ocb-chart li::before,
.ocb-chart li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	width: 50%;
	height: 40px;
	border-top: 2px solid #c3c9d1;
}

.ocb-chart li::after {
	right: auto;
	left: 50%;
	border-left: 2px solid #c3c9d1;
}

.ocb-chart li:only-child::before,
.ocb-chart li:only-child::after {
	display: none;
}

.ocb-chart li:only-child {
	padding-top: 0;
}

.ocb-chart li:first-child::before,
.ocb-chart li:last-child::after {
	border: 0 none;
}

.ocb-chart li:last-child::before {
	border-right: 2px solid #c3c9d1;
	border-radius: 0 6px 0 0;
}

.ocb-chart li:first-child::after {
	border-radius: 6px 0 0 0;
}

.ocb-chart > li {
	padding-top: 0;
}

.ocb-chart > li::before,
.ocb-chart > li::after {
	display: none;
}

.ocb-chart ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 40px;
	border-left: 2px solid #c3c9d1;
}

.ocb-node {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 10px;
	padding: 14px 16px;
	min-width: 140px;
	box-shadow: 0 2px 8px rgba(20, 30, 60, 0.06);
	position: relative;
}

.ocb-node-photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: #eef1f5;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.ocb-node-photo-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

/*
 * Lightbox-Vorschau beim Mouse-Over – nur im Frontend (nicht im
 * Admin-Editor, dort hat der Klick zum Foto-Wechsel Vorrang). Die
 * Wrapper-Klasse "ocb-frontend-view" wird nur von der Shortcode-Ausgabe
 * gesetzt, nicht vom Editor. Der Hintergrund wird abgedunkelt und das
 * Foto in voller Auflösung zentriert angezeigt, solange die Maus über
 * dem kleinen Foto verweilt.
 */
.ocb-frontend-view .ocb-node-photo {
	overflow: visible;
}

.ocb-frontend-view .ocb-node-photo-thumb {
	cursor: zoom-in;
	transition: transform 0.2s ease;
}

.ocb-frontend-view .ocb-node:hover {
	z-index: 40;
}

.ocb-frontend-view .ocb-node-photo:hover .ocb-node-photo-thumb {
	transform: scale(1.08);
}

.ocb-lightbox {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 9999;
}

.ocb-frontend-view .ocb-node-photo:hover .ocb-lightbox {
	opacity: 1;
	visibility: visible;
}

.ocb-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 18, 0.85);
}

.ocb-lightbox-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 90vw;
	max-height: 90vh;
}

.ocb-lightbox-img {
	display: block;
	max-width: 90vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	object-fit: contain;
	background: #fff;
}

.ocb-lightbox-caption {
	color: #fff;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ocb-node-photo-placeholder {
	font-size: 16px;
	font-weight: 600;
	color: #8a93a3;
}

.ocb-node-name {
	font-weight: 700;
	font-size: 14px;
	color: #000000;
	line-height: 1.3;
}

.ocb-node-title {
	font-weight: 700;
	font-size: 12px;
	color: #000000;
	line-height: 1.3;
}

.ocb-node-extra {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px dashed #e2e5ea;
	font-size: 11px;
	font-weight: 600;
	color: #000000;
	line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
	.ocb-node {
		background: #1f2430;
		border-color: #333a4a;
	}

	.ocb-node-name {
		color: #ffffff;
	}

	.ocb-node-title {
		color: #ffffff;
	}

	.ocb-node-extra {
		border-top-color: #333a4a;
		color: #f2f4f8;
	}
}