/* =====================================================
   SCROLL CONTAINER
===================================================== */

.orgmap-scroll {

    width: 100%;

    overflow: auto;

    padding-bottom: 20px;

    min-height: 100dvh;

    background: #ffffff;
}

/* =====================================================
   ORGMAP HAUPTBEREICH
===================================================== */

.orgmap-wrapper {

    position: relative;

    background: #ffffff;

    border: none;

    overflow: visible;

    transform-origin: top left;

    display: inline-block;
}


/* =====================================================
   SVG LINIEN
===================================================== */

#orgmap-svg {

    position: absolute;

    inset: 0;

    z-index: 1;
}


/* =====================================================
   HTML KNOTEN EBENE
===================================================== */

.orgmap-layer {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;
}

/* =====================================================
   NODE CONTAINER
===================================================== */

.org-node {

    position: absolute;

    inset: 0;
}


/* =====================================================
   KREISE
===================================================== */

.org-node-html {

    position: absolute;

    overflow: visible;

    text-align: center;

    text-decoration: none;

    color: #000;

    font-weight: bold;

    border: 3px solid #2196f3;

    background-size: cover;

    background-position: center;

    transition: filter 0.2s;

    pointer-events: auto;
}


.org-node-background {

    position: absolute;

    inset: 0;

    background-size: 100% 100%;

    background-position: top left;

    z-index: 1;
}

/* =====================================================
   NODE SHAPES
===================================================== */

.org-node-circle {

	border-radius: 50%;
}

.org-node-circle .org-node-background {

	border-radius: 50%;
}

.org-node-rectangle {

	border-radius: 0;
}

.org-node-rectangle .org-node-background {

	border-radius: 0;
}

.org-node-rounded {

	border-radius: 24px;
}

.org-node-rounded .org-node-background {

	border-radius: 24px;
}


/* =====================================================
   HOVER EFFEKT
===================================================== */

.org-node-html:hover {

    filter: brightness(1.05);
}

.org-node-panel:hover {

	filter: none;
}

/* =====================================================
   TEXT IM KREIS
===================================================== */

.org-node-label {

    position: absolute;

    width: 99%;

    left: 0;
    top: 0;

    text-align: center;

    line-height: 1.2;

    pointer-events: auto;

    cursor: move;

    z-index: 10;

    word-break: break-word;

    text-shadow:
        0 1px 3px rgba(255,255,255,0.8);
}

.org-node-has-content .org-node-label {

	padding: 10px;
}

.org-node-panel .org-node-label {

	text-align: left;
}

.org-node-legend .org-node-label {

	font-size: 12px;

	line-height: 1.3;
}

/* =====================================================
   RESIZE HANDLE
===================================================== */

.org-node-resize {
	
	pointer-events: auto;

    position: absolute;

    right: 6px;
    bottom: 6px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #ffffff;

    border: 2px solid #333;

    cursor: se-resize;

    z-index: 50;
}

/*
--------------------------------------------------
Hintergrundflächen
--------------------------------------------------
*/

.org-node-is-background {

	z-index: 1 !important;

	pointer-events: none;

	filter: brightness(0.96);
}

.org-node-is-background .org-node-background {

	box-shadow: none;

	opacity: 0.35;

	filter: saturate(0.9);
}

/*
--------------------------------------------------
Node Content
--------------------------------------------------
*/

.org-node-content {

    margin-top: 6px;

    padding: 10px;

    font-size: 12px;

    line-height: 1.4;

    border-radius: 8px;

    background: rgba(255,255,255,0.72);

	/* backdrop-filter: blur(4px); */

    overflow-wrap: break-word;

    text-align: left;

    display: flex;

    flex-direction: column;
 
    gap: 6px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.08);
   	border:
        1px solid rgba(0,0,0,0.05);
    
    min-width: 160px;
}

.org-node-content strong {

    display: block;

    margin-bottom: 8px;

    padding-bottom: 6px;

    border-bottom:
        1px solid rgba(0,0,0,0.06);

    font-size: 16px;

    font-weight: 700;
}


/*
--------------------------------------------------
HTML Content
--------------------------------------------------
*/

.org-node-content h1,
.org-node-content h2,
.org-node-content h3,
.org-node-content h4 {

    margin-top: 12px;

    margin-bottom: 6px;

    line-height: 1.2;

    font-weight: 700;
}

.org-node-content h1 {

    font-size: 24px;
}

.org-node-content h2 {

    font-size: 20px;
}

.org-node-content h3 {

    font-size: 17px;
}

.org-node-content h4 {

    font-size: 15px;
}

.org-node-content p {

    margin-bottom: 10px;

    line-height: 1.5;
}

.org-node-content ul,
.org-node-content ol {

    padding-left: 20px;

    margin-bottom: 10px;
}

.org-node-content li {

    margin-bottom: 4px;
}


/*
--------------------------------------------------
Panel Shape
--------------------------------------------------
*/

.org-node-panel {

    border-radius: 28px !important;

    border-width: 2px !important;

    background:
        rgba(255,255,255,0.12);

    backdrop-filter:
        blur(6px);

    box-shadow:
        0 6px 20px rgba(0,0,0,0.12);

	padding: 12px;
}

.org-node-panel .org-node-content {

	background: rgba(255,255,255,0.82);
}

/*
--------------------------------------------------
Legend Shape
--------------------------------------------------
*/

.org-node-legend {

    border-radius: 16px !important;

    border-style: dashed;

    background: rgba(255,255,255,0.65);

    box-shadow: none;
}

.org-node-legend .org-node-content {

	padding: 6px;

	font-size: 11px;

	background: transparent;

	box-shadow: none;

	border: none;
}