@charset "UTF-8";
/* Organigramm */

.organigramm-wrapper {
  padding: 10px;
  overflow: visible;
}

.organigramm-wrapper svg {
  	overflow: visible;
	width: 100%;
  	height: auto;
  	display: block;
}

/* Kachel-Hit-Area */
svg .tile > rect {
  pointer-events: all;
  stroke: none !important;
}

/* Logos & Pfade ignorieren Pointer */
svg .tile image,
svg .tile path {
  pointer-events: none;
}

/* Keine Fokus-Outline */
svg .tile:focus,
svg .tile:focus-visible {
  outline: none;
}

/* Starker Shadow bei Hover, Klick & Fokus */
.tile--white rect {
	transition: all .3s ease;
}

.tile--white:hover rect,
.tile--white.is-hover rect,
.tile--white:focus-visible rect {
  filter: url(#tile-shadow-hover);
}

/* ALLE weißen Kacheln: keinerlei Konturen */
svg .tile--white > rect {
  stroke: none !important;
  stroke-width: 0 !important;
  outline: none !important;
}

/* Falls Illustrator extra Pfade für Konturen erzeugt hat */
svg .tile--white path {
  stroke: none !important;
}

#svg-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 420px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}

#svg-tooltip.is-active-tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#svg-tooltip .tooltip-title {
    font-size: 20px;
    margin-bottom: .5em;
	font-weight: normal;
}

#svg-tooltip .tooltip-content {
  background: rgb(41 55 70 / 90%);
	 backdrop-filter: blur(5px);
  color: #fff;
  padding: 20px 22px;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  font-size: 16px;
  line-height: 1.45;
}

#svg-tooltip .tooltip-text {
  margin: 0 0 16px;
}

.tooltip-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tooltip-link {
  display: inline-block;
  padding: .75em 2em;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.tooltip-link.primary {
  background: #fff;
  color: #000;
}

.tooltip-link.secondary {
  color: #000f25;
  background-color: #85a9de;
}

.tooltip-close {
   	position: absolute;
	top: 5px;
	right: 5px;
	background: #e6e9ec;
	border: 0;
	color: #213671;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
	padding: 10px 15px !important;
	z-index: 9;
}

.tooltip-close:hover {
  	opacity: 1;
}

svg .tile {
  cursor: pointer;
}

/* Filtern */
svg g[id] {
  cursor: default;
}

/* explizit interaktive Filter-Buttons */
svg g#placement,
svg g#permanent,
svg g#ad-interim,
svg g#consulting,
svg g#fuehrung,
svg g#verguetung,
svg g[id="ab-200k"],
svg g[id="ab-200k-mobile"],
svg g[id="80-bis-200k"],
svg g#bis-80k {
  cursor: pointer;
}

svg g#placement:hover rect,
svg g#permanent:hover rect,
svg g#ad-interim:hover rect,
svg g#consulting:hover rect,
svg g#fuehrung:hover rect,
svg g#verguetung:hover rect,
svg g[id="ab-200k"]:hover rect,
svg g[id="ab-200k-mobile"]:hover rect,
svg g[id="80-bis-200k"]:hover rect,
svg g#bis-80k:hover rect {
  fill: #293746;
  transition: fill .15s ease;
}

g.is-dimmed {
  opacity: 0.25;
  transition: opacity .2s ease;
}

g.is-active rect {
  filter: url(#tile-shadow-hover);
}

/* Flackern von Tooltips verhindern */
svg .tile > rect {
  pointer-events: all;
}

svg .tile path,
svg .tile image {
  pointer-events: none;
}

@media (min-width: 769px){
	svg g[id="ab-200k-mobile"]{
		display: none;
	}
}

@media (max-width: 768px) {
	svg g[id="ab-200k-mobile"] {
		display: block;
		transform: translateY(0px) translateX(1000px);
		transform-origin: center;
	}
	
    svg g#consulting-section {
        transform: translateY(800px) translateX(-1000px);
        transform-origin: center;
    }
	
	svg g#consulting-section g#consulting, 
	svg g#consulting-section g#fuehrung, 
	svg g#consulting-section g#verguetung {
        transform: scaleX(1.13);
        transform-origin: center;
    }
	
	svg g#consulting-section g#rau-training-coaching,
	svg g#consulting-section g#rau-compensation {
		transform: translateY(-180px);
        transform-origin: center;
	}
	
	svg g#consulting-section g#rau-training-coaching > g:first-of-type,
	svg g#consulting-section g#rau-compensation > g:first-of-type {
        transform: translateY(20px) scaleX(1.13) scaleY(.42);
        transform-origin: center;
    }
	
	svg g#consulting-section g#rau-training-coaching > g:last-of-type {
		transform: translateX(90px) translateY(80px);
		transform-origin: center;
	}
	svg g#consulting-section g#rau-compensation > g:last-of-type {
		transform: translateX(150px) translateY(80px);
		transform-origin: center;
	}

}