/** ANIMATION **/
.stage .content:has(#anim) {
	display: flex;
	gap: 2em;
	justify-content: space-between;
}
#anim {
	max-width: 50%;
	width: 100%;
	position: relative;
	aspect-ratio: 1/1;
	align-self: end;
}
.anim {position:relative;inline-size:100%;block-size:auto}
.anim_box {position:relative;inline-size:100%;block-size:100%}
.anim .layer {position:absolute;inset:0; z-index: 10}
.anim .layer--svg svg{display:block;width:100%;height:100%}
.anim .layer--img {position:absolute;inset:0; z-index: 1; opacity: 0;}
.anim .layer--img img{display:block;width:100%;height:100%;object-fit:contain}
.anim .mask{position:absolute;inset:0;pointer-events:none}

/* Basis: alle Masken sind "Glass-Overlays" */
.anim .mask {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px) saturate(120%);
  /*background: rgba(255,255,255,0.25);  Milchglas-Effekt */
  /*border: 1px solid rgba(255,255,255,0.4); */
  pointer-events: none;

}

/* Safari/Chrome: WebKit-Mask */
.anim .mask {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-composite: source-in;
}
/* Standard: W3C Mask */
.anim .mask {
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-composite: intersect; /* Alternative Werte: add, subtract etc. */
}
/* Einzeln pro Shape verknüpfen */
.anim .mask--sonstige {
  -webkit-mask-image: url('images/animation/shape-sonstige_mask.svg'); mask-image: url('images/animation/shape-sonstige_mask.svg');
}
.anim .mask--cluster {
  -webkit-mask-image: url('images/animation/shape-cluster_mask.svg'); mask-image: url('images/animation/shape-cluster_mask.svg');
}
.anim .mask--migraene {
  -webkit-mask-image: url('images/animation/shape-migraene_mask.svg'); mask-image: url('images/animation/shape-migraene_mask.svg');
}
.anim .mask--spannung {
  -webkit-mask-image: url('images/animation/shape-spannung_mask.svg'); mask-image: url('images/animation/shape-spannung_mask.svg');
}
.anim .layer.sonstige {
	z-index: 5;
}
.anim .layer.cluster {
	z-index: 6;
}
.anim .layer.migraene {
	z-index: 7;
}
.anim .layer.spannung {
	z-index: 8;
}
#anim svg {
	overflow: visible;
	position: relative;
	z-index: 3;
	display: block;
}
.anim #shapes #shape {
	filter: drop-shadow(0 3em 2em rgba(0,0,0,0.2));
}
.anim #shape-active {
	opacity: 0;
}
.anim #shapes text {
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
}
.anim #shapes text#text-mobile {
	font-weight: 600 !important;
}
@media(max-width: 767px){
	.anim #shapes text#text-mobile {
		display: block !important;
	}
	.anim #shapes text#text-desktop {
		display: none !important;
	}
}

.anim .layer--img {
	transition: opacity 150ms ease 0ms;
}

main:not(.result) .anim .layer--img.is-active,
main:not(.result) .anim:has(.layer.is-active.migraene) :where(.layer--img.layer--migraene),
main:not(.result) .anim:has(.layer.is-active.spannung) :where(.layer--img.layer--spannung),
main:not(.result) .anim:has(.layer.is-active.sonstige) :where(.layer--img.layer--sonstige),
main:not(.result) .anim:has(.layer.is-active.cluster) :where(.layer--img.layer--cluster) {
	opacity: 1;
	transition: opacity 500ms ease 150ms;
}
.result .anim:has(.layer.is-active.is-target.migraene) :where(.layer--img.layer--migraene),
.result .anim:has(.layer.is-active.is-target.spannung) :where(.layer--img.layer--spannung),
.result .anim:has(.layer.is-active.is-target.sonstige) :where(.layer--img.layer--sonstige),
.result .anim:has(.layer.is-active.is-target.cluster) :where(.layer--img.layer--cluster) {
	opacity: 1;
	transition: opacity 500ms ease 150ms;
}
.anim .layer.is-active,
.anim:has(.layer.is-active.sonstige) :where(.layer.cluster),
.anim:has(.layer.is-active.spannung) :where(.layer.cluster, .layer.sonstige),
.anim:has(.layer.is-active.migraene) :where(.layer.cluster),
.anim:has(.layer.is-active.cluster) :where(.layer.cluster) {
	z-index:0
}
.anim .layer:is(.is-active, .is-target) #shape-active {
	opacity: 1;
	transition: opacity 250ms ease 0ms;
}
/*.anim .layer.is-target:not(.is-active) #shape-active {
	filter: none;
}*/
.anim .layer:is(.is-active, .is-target) #shape {
	filter: none;
}

.anim .layer:is(.is-active, .is-target).cluster text,
.anim .layer:is(.is-active, .is-target).migraene text {
	fill: rgb(var(--white)) !important;
}
.anim .layer.is-active.migraene {
	z-index: 5;
}
.anim .layer:is(.is-active, .is-target).migraene #shape-active {
	filter: drop-shadow(0 2em 2em rgba(var(--red-light), 1));
}
.anim .layer.is-active.spannung {
	z-index: 5;
}
.anim .layer:is(.is-active, .is-target).spannung #shape-active {
	filter: drop-shadow(0 2em 2em rgba(var(--yellow-light),1));
}
.anim .layer:is(.is-active, .is-target).sonstige #shape-active {
	filter: drop-shadow(0 2em 2em rgba(var(--green-light), 1));
}
.anim .layer:is(.is-active, .is-target).cluster #shape-active {
	filter: drop-shadow(0 2em 2em rgba(var(--berry-light), 1));
}

@keyframes flash-shapes {
	0%   { opacity: 1; }
	30%  { opacity: 0; }
	60%  { opacity: 1; }
	100% { opacity: 1; }
}

/* Wenn ein Layer .is-target wird → shapes blitzen */
.anim .layer.is-target #shapes {
  animation: flash-shapes 750ms ease-in-out 250ms;
}

/** ENDE: ANIMATION **/