.flex-left    {
    display: flex;
    justify-content: flex-start;
}

.flex-center    {
    display: flex;
    justify-content: center;
}

.flex-right    {
    display: flex;
    justify-content: flex-end;
} 

/* Bootstrap fixes  */
.row {
	--bs-gutter-x: 0;
    --bs-gutter-y: 0;

	& > [class*='col-'] {
		padding: 0;
	}
}

/* Layouts */
/* Der Seiteninhalt steht im Dokument hinter Header und Sidebar und wird deshalb
   sichtbar spaeter gezeichnet. Statt den harten Aufschlag zu kaschieren, blendet
   er weich ein. Bewusst ohne JS: die Animation laeuft mit dem ersten Frame des
   Elements los, es kann also nichts unsichtbar haengen bleiben, wenn ein Script
   scheitert. */
@keyframes ef-page-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.layout-content-static {
	& .page-content {
		/*height: calc(100vh - 64px);*/
	}
}

.page-content {
	position: relative; 

	&:not(.dashboard) {
		padding: 64px calc(64px - var(--scrollbar-width, 0px)) 128px 64px;

		@media (max-width: 992px) {
			padding: 64px 24px 128px 24px;
		}
	}

	& .page-content-inner {
		padding: 64px 0 64px;
	}

	&.dashboard {
		height: calc(100vh - var(--global-main-header-height, 0px));
        
		&.layout-design {
			& .sidebar-container {
				width: 100%;

				@media (min-width: 576px) {
					max-width: 480px;
				}

                & .sidebar__content{
                    padding: 64px;

					@media (max-width: 576px) {
						padding: 20px;
					}
                }
			}

			& .container-page {
				left: 480px;

                @media (max-width: 992px) {
					left: 0;
	                padding: 64px;
                }
			}

            & #save-design{
				z-index: 10;
                position: sticky;
                top: 0px;
                width: 100%;
            }
		}

		& .sidebar-container {
			/* Muss ueber den klebenden Elementen in .container-page liegen
			   (#survey-actions-bar und .listing-rail z-index 3,
			   .surveyListingHeaders z-index 2). .container-page bildet bewusst
			   keinen Stacking Context (siehe Animation dort), deren z-index
			   konkurriert also direkt mit der Sidebar - auf schmalen Viewports
			   schiebt sie sich sonst ueber den Inhalt, liegt aber darunter. */
			z-index: 4;
			width: 320px;
			background-color: var(--ef-color-white);
			border-right: 1px solid var(--ef-color-signal-black-16);
			display: grid;
			grid-template-areas:
				"mobileClose"
				"content"
				"info";
			grid-template-rows: max-content 1fr max-content;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			transform: translate(0);
			transition: transform linear 250ms, width linear 250ms;
			animation: ef-page-fade-in 580ms ease-out both;

			@media (prefers-reduced-motion: reduce) {
				animation: none;
			}

			@media (max-width: 992px) {
				transform: translateX(-100%)
			}

			@media (max-width: 768px) {
				width: 100vw;
			}

			.sidebar__flap {
				z-index: 9999;
				position: absolute;
				top: 14px;
                left: 100%;
                background: var(--ef-color-signal-black-8);
                width: 38px;
                height: 38px;
				cursor: pointer;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;

				&:hover,
				&:focus {
					background: var(--ef-color-signal-black-16);
					color: var(--ef-color-black-100);
				}

				@media (max-width: 768px) {
					.flap-close {		
						transform: rotate(180deg);
					}
				}
			}

			& .sidebar-close {
				grid-area: mobileClose;

				@media (max-width: 768px) {
					padding: 10px 35px;
				}

				@media (min-width: 769px) {
					display: none !important;
				}
			}

			&.open {
				transform: translateX(0);

				& .sidebar__flap {
					display: none;

					@media (max-width: 576px) {
						display: none !important;
					}
				}

				& .sidebar__mobile-background {
					opacity: 1;
					width: 100vw;
					transition-delay: 250ms;
				}
			}

			& .sidebar__content {
				grid-area: content;
				overflow-y: auto;
				padding-block: 28px;
				background: var(--ef-color-white);
                height: 100%;

				@media (max-width: 768px) {
					padding-top: 0;
				}

				& .dropdown {
					a {
						padding-inline: 20px 30px;
						font-size: 14px;
						min-height: auto;
					}
				}
	
				& ul {
					margin: 0px;
					padding: 0px;
	
					& li {
						&:has( > a),
						& > div {
							padding-inline-end: 20px;
						}

						&:has( > a),
						& > div {
							display: flex;
							align-items: center;
							gap: 10px;

							& a {
								padding-right: 0;
								flex: 1 1 auto !important;
							}

							& i {
								transition: transform linear 250ms;
							}

							&:hover {
								background-color: var(--ef-color-signal-black-4);

								& .number {
									background: #DDD;
								}

								& ul {
									background: white;
								}

								/*& > .createFolder,
                                & > .deleteFolder {
									visibility: visible;
								}*/
								& .createFolder,
								& .dropdown {
									visibility: visible;
								}
							}
						}

						& .createFolder,
						& .dropdown {
							visibility: hidden;
						}

						&.active:has( > a),
						&.active > div:has( .bi.bi-plus-lg) {
							background-color: #efefef;

							& .number {
								background: #DDD;
							}
						}

						& > input {
							display: none;

							& ~ ul {
								max-height: 0;
								overflow: hidden;
								transition: max-height linear 500ms;
							}

							&:checked {
								& + div {
									& label {
										i {
											transform: rotate(180deg);
										}
									}
								}

								& ~ ul {
									max-height: 1000px;
								}
							}
						}
						
						& a,
						& > span {
							/*font-family: "Lato Bold";*/
							font-size: var(--fs-16);
							display: flex;
							align-items: center;
							gap: 10px;
							padding-inline: 40px;
							padding-block: 18px;
							min-height: 40px;
							max-height: 64px;
							text-decoration: none;
							color: var(--ef-color-greyblue);
	
							& .number {
								display: inline-flex;
								align-items: center;
								justify-content: center;
								border-radius: 50%;
								min-width: 24px;
								height: 24px;
								color: var(--ef-color-greyblue);
								background-color: var(--ef-color-signal-black-8);
								font-size: var(--fs-12);
							}

                            &:hover{
                                text-decoration: none;
                               /* color: var(--ef-color-indiablue);*/
                                
                                & .number{
                                    text-decoration: none;
                                    /*color: var(--ef-color-indiablue);*/
                                }
                            }
						}

						& ul {
							li {
								&.active {
									/*.number {
										background: var(--ef-color-signal-black-100);
										color: var(--ef-color-white);
									}

									.description {
										text-decoration: underline;
										text-decoration-thickness: 3px;
									}*/
									/*background: var(--ef-color-signal-black-4);*/
									background-color: #efefef;

									& .number {
										background: #DDD;
									}

									a {
										& span {
                                            /* font-family: "Lato Bold"; */
                                        }
									}
								}

								&:hover {
									background-color: var(--ef-color-signal-black-4);

									& .number {
										background: #DDD;
									}
								}

								a {
									font-family: Lato;
									padding-left: 75px;
									
									/* Trim text after to lines with "..." */
									.lineClamp {
										overflow: hidden;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 2;
									}

									&:hover,
									&:focus,
									&:active {
                                        text-decoration: none;
                                        /*color: var(--ef-color-indiablue);*/

										/*& .number {
                                            color: var(--ef-color-white);
											background: var(--ef-color-indiablue);
										}*/
									}
								}
							}
						}
					} 
				}

                & form {
                    position: relative;
                }
			}

			.sidebar__mobile-background {
				transition: opacity linear 200ms;
				background: rgba(var(--ef-color-signal-black-100-rgb), 0.4);
				z-index: -1;
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 100%;
				opacity: 0;
			}
	
			& .sidebar__info {
				grid-area: info;
				display: flex;
				flex-direction: column;
				gap: 10px;
				position: relative;
				border-top: 1px solid var(--ef-color-signal-black-16);
				padding-inline: 40px;
				padding-block: 28px;
				overflow-y: hidden;
				max-height: 180px;
                min-height: 180px;
				background: white;
				
				& .infobox-msg {
					overflow: hidden;
					min-height: 60px;
    				max-height: 60px;

					& > div {
						overflow: hidden;
						position: relative;
						max-height: 110px;
						/* Trim text content after 8 lines */
						display: -webkit-box;
						-webkit-line-clamp: 8;
						-webkit-box-orient: vertical;
	
						& .gradient {
							position: absolute;
							width: 100%;
							height: 60px;
							/*margin-top: -60px;*/
							top: 20px;
							background: -moz-linear-gradient(bottom, rgba(var(--ef-color-white-rgb),0.95) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
							background: -webkit-linear-gradient(bottom, rgba(var(--ef-color-white-rgb),0.95) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
							background: linear-gradient(to top, rgba(var(--ef-color-white-rgb),0.95) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6dddddd',GradientType=0 ); /* IE6-9 */
						}
					}
				}
			}
		}

		& .container-page {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 320px;
			right: 0;
			overflow-y: auto;
			/* Platz fuer die Scrollbar immer reservieren, sonst springt der Inhalt
			   seitlich, sobald sie auftaucht. Das rechte Padding wird um die
			   Scrollbarbreite gekuerzt, damit der Abstand optisch gleich bleibt
			   (--scrollbar-width wird in header.tpl gemessen, 0 bei Overlay-Scrollbars). */
			scrollbar-gutter: stable;
			padding: 40px calc(64px - var(--scrollbar-width, 0px)) 128px 64px;
			transition: left linear 250ms;
			/* Fill-Mode bewusst "backwards" und nicht "both": der Forwards-Anteil
			   haelt den animierten Opacity-Wert nach Ablauf dauerhaft aktiv, und ein
			   Element mit aktiver Opacity-Animation ist ein Stacking Context. Modals
			   in diesem Container landen dann hinter Bootstraps Backdrop (z-index
			   1050 an <body>), egal wie hoch ihr eigener z-index ist. Der Endwert ist
			   ohnehin opacity 1, also der Default - forwards bringt optisch nichts. */
			animation: ef-page-fade-in 580ms ease-out backwards;

			@media (prefers-reduced-motion: reduce) {
				animation: none;
			}

			@media (max-width: 992px) {
				left: 0;
				padding: 60px calc(24px - var(--scrollbar-width, 0px)) 128px 24px;
			}
		}
	}
}

/*paddings & margins*/
    .m-0 {margin: 0px;}
    .mt-10{margin-top: 10px;}
    .mt-auto{margin-top: auto;}
    .mb-20{margin-bottom: 20px;}
    .mr-6{margin-right: 6px;}
    .ml-4{margin-left: 4px;}
    .ml-8{margin-left: 8px;}

    .pt-5{padding-top: 5px;}
    .pt-10{padding-top: 10px;}

/* Overview */
    .survey-details {
		border-radius: 8px;
		container: surveyCard / inline-size;
		/* Fix for older Chrome versions since container creates a new stacking context
		which lets the dropdown open behind next containers */
		position: relative;

		/* Ueber den klebenden Abschnittstiteln (z-index 2) und der Sprungleiste
		   (3): das offene Menue reicht ueber die Kachel hinaus und wuerde sonst
		   z.B. hinter #sortable2_head verschwinden. */
		&:has(.dropdown-menu.show) {
			z-index: 4;
		}
		/* Fix end */

		&.archive {
			& .survey__card {
				grid-template-columns: max-content 1fr max-content 32px;
				grid-template-areas: 
					"checkbox title inviteResult reactivate options"
					"checkbox updatedDateStatus inviteResult reactivate options";

				@media (max-width: 768px) {
					grid-template-areas: 
						"checkbox title title options"
						". updatedDateStatus updatedDateStatus ."
						". inviteResult inviteResult reactivate";
				}
			}
		}

		& .survey__card {
			position: relative;
			padding: 14px 16px 14px 8px;
			display: grid;
			/*grid-template-areas: 
				"checkbox title invite results avatar options"
				"checkbox updatedDateStatus invite results avatar options";*/
			grid-template-areas: 
				"checkbox title inviteResult avatar options"
				"checkbox updatedDateStatus inviteResult avatar options";
			grid-template-rows: 1fr max-content;
			grid-template-columns: max-content 1fr max-content max-content 32px;
			align-items: center;
			/*gap: 8px 16px;*/
			gap: 0 8px;

			& .survey__link {
				position: absolute;
				inset: 0;
				border-radius: 8px;

				&:hover {
					text-decoration: none;
				}
			}

			&.no-user-rights {
				grid-template-areas: 
					"title inviteResult avatar"
					"updatedDateStatus inviteResult avatar";
				grid-template-columns: 1fr max-content 32px;

				@container (max-width: 715px) {
					grid-template-areas: 
						"title title"
						"updatedDateStatus updatedDateStatus"
						"inviteResult avatar";
					grid-template-columns: 1fr 32px;
					gap: 4px 8px;
				}

				& .survey__avatar {
					margin-right: 0;
				}
			}

			&.user-template-rights {
				grid-template-areas:
					"title inviteResult avatar options"
					"updatedDateStatus inviteResult avatar options";
				grid-template-columns: 1fr max-content max-content 32px;

				@container (max-width: 715px) {
					grid-template-areas:
						"title title options"
						"updatedDateStatus updatedDateStatus ."
						"inviteResult inviteResult avatar";
					grid-template-columns: repeat(2, 1fr) 32px;
					gap: 4px 8px;
				}
			}

			&:hover {
				cursor: pointer;

				& .survey__select {
					& label {
						opacity: 1;
					}
				}
			}

			&:has(input[type="checkbox"]:checked) {
				& label {
					opacity: 1;
				}
			}

			@container (max-width: 715px) {
				/*grid-template-areas: 
					"checkbox title title options"
					"checkbox invite results options"
					"checkbox updatedDateStatus updatedDateStatus avatar";*/
				grid-template-areas: 
					"checkbox title title options"
					". updatedDateStatus updatedDateStatus ."
					". inviteResult inviteResult avatar";
				grid-template-columns: max-content repeat(2, 1fr) 32px;
				gap: 4px 8px;
			}

			& .icons-top-right {
				display: flex;
				position: absolute;
				right: 0;
				top: 0;
				overflow: hidden;
				border-top-right-radius: 8px;
				border-bottom-left-radius: 8px;
				background: var(--ef-color-signal-black-80);

				& > span,
				& > a {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 32px;
					height: 16px;
					/*border-bottom-left-radius: 8px;*/
				}
			}

			& .survey__select {
				grid-area: checkbox;
				align-self: center;

				& label {
					position: relative;
					z-index: 1;
					opacity: 0;

					/* Make the clickable area of the checkbox bigger to prevent accidentally clicking the survey link */
					&::before {
						content: "";
						height: 40px;
						width: 30px;
						position: absolute;
						left: -7px;
						z-index: -1;
					}
				}
			}

			& .survey__title {
				grid-area: title;
				display: flex;
				flex-direction: column;
				/*gap: 12px;*/
				justify-content: center;

				& .survey__labels {
					display: flex;
					gap: 5px;
					flex-wrap: wrap;
				}


				a {
					color: var(--ef-color-signal-black-100);
					text-decoration: none;

					&:hover,
					&:active,
					&:focus {
						color: var(--ef-color-greenbrown);
					}
				}
			}

			& .survey_update-status {
				grid-area: updatedDateStatus;
				display: flex;
				flex-wrap: wrap;
				gap: 16px;
				align-items: center;

				@container (max-width: 715px) {
					gap: 5px;
				}
			}

			& .survey__updated {
				/*grid-area: updatedDate;*/
				cursor: default;
			}

			& .survey__status {
				/*grid-area: status;*/
				cursor: default;
			}

			/*& .survey__invite,
			& .survey__result,*/
			& .survey__invite-result,
			& .survey__avatar {
				margin-right: 8px;
			}

			& .survey__invite-result {
				grid-area: inviteResult;
				display: flex;
				gap: 4px;
				align-items: center;
			}

			& .survey__invite {
				/*grid-area: invite;*/

				/*@container (min-width: 715px) {
					transform: translateX(8px);
				}*/
			}

			& .survey__result {
				/*grid-area: results;*/
			}

			& .survey__avatar {
				grid-area: avatar;
				cursor: default;
			}

			& .survey__reactive {
				grid-area: reactivate;
				align-self: center;
			}
			
			& .survey__options {
				grid-area: options;
				align-self: center;
			}

			& .survey__select, 
			& .survey__title, 
			& .survey__invite-result, 
			& .survey__options {
				position: relative;
				z-index: 1;
			}
		}
    }
    
    #preparing .survey-details {
        --listing-copy-base: var(--ef-color-signal-black-4);
        background-color: var(--listing-copy-base);

		&:hover,
		&:focus {
			background-color: rgba(var(--ef-color-signal-black-8-rgb), 0.97);
		}
    }
	#running .survey-details {
		--listing-copy-base: rgba(var(--ef-color-indiablue-rgb), 0.1);
		background-color: var(--listing-copy-base);

		&:hover,
		&:focus {
			background-color: rgba(var(--ef-color-indiablue-rgb), 0.25);
		}
    }
    #completed .survey-details {
        --listing-copy-base: rgba(var(--ef-color-raspberry-red-rgb), 0.1);
        background-color: var(--listing-copy-base);

		&:hover,
		&:focus {
			background-color: rgba(var(--ef-color-raspberry-red-rgb), 0.25);
		}
    }

	/* Frisch kopierte Umfrage hervorheben: kurz kraeftig einfaerben, dann zweimal
	   zur Abschnittsfarbe zurueck und wieder hin, zuletzt aus.

	   Einfaerbung und Puls liegen in einer einzigen Bildfolge, weil beide
	   background-color bewegen - zwei Animationen auf derselben Eigenschaft
	   wuerden sich gegenseitig ausschalten.

	   Der Puls braucht die Ruhefarbe auch zwischendrin, nicht nur am Ende. Die
	   liefert --listing-copy-base, das jeder Abschnitt oben neben seinem eigenen
	   Hintergrund setzt - so pulst die Karte gegen ihre echte Farbe und nicht
	   gegen eine fest verdrahtete. */
	@keyframes listingCopyPulse {
		0%, 15% { background-color: #FEEAC4; }
		40% { background-color: var(--listing-copy-base, transparent); }
		60% { background-color: #FEEAC4; }
		100% { background-color: var(--listing-copy-base, transparent); }
	}

	/* Kein forwards: das letzte Bild ist ohnehin die Ruhefarbe, und ohne
	   Fuellmodus greifen danach die Hover-Farben der Abschnitte wieder. */
	.survey__card.survey-copy {
		animation: listingCopyPulse 3.2s ease-in-out;
		border-radius: 8px;
	}

/* modals */	
.add-audio-modal,
.image-upload-modal {
	& .file-input-wrapper {
		width: max-content;
	}
}

.question-modal {
	& .nav {
		.btn-signal-black-16 {
			&.active {
				background: var(--ef-color-signal-black-100) !important;
				color: var(--ef-color-white) !important;
			}
		}
	}
}

.logic-modal {
	& .conditions {
		& .condition-initial {
			display: grid;

			@media (min-width: 768px) {
				grid-template-columns: max-content max-content 1fr 32px;
			}

			& .deleteAnswer {
				position: absolute;
				top: 50%;
				right: -16px;
				transform: translate(100%, -50%);
			}

			& div {
				&:empty {
					display: none;
				}
			}
		}

		& .condition {
			display: grid;
			grid-template-areas: 
				"select1"
				"text"
				"select2"
				"delete";
			grid-template-rows: max-content max-content 1fr max-content;

			@media (min-width: 768px) {
				grid-template-areas: "select1 text select2 delete";
				grid-template-columns: max-content max-content 1fr max-content;
				grid-template-rows: 1fr;
			}

			& > :nth-child(1) {
				grid-area: select1;
			}

			& > :nth-child(2) {
				grid-area: text;
			}

			& > :nth-child(3) {
				grid-area: select2;
			}

			& > :nth-child(4) {
				grid-area: delete;
				margin-top: 2px;
				display: flex;
				justify-content: center;
				align-items: start;
			}

			& div {
				&:empty {
					display: none;
				}
			}

			& .deleteAnswer {
				position: absolute;
				top: 50%;
				right: -21px;
				transform: translate(100%, -50%);
			}
		}
	}
}

/* hr */
.hr-text {
	position: relative;
	padding: 10px 0;

	& span {
		display: flex;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: var(--ef-color-white);
		padding: 0 10px;
		color: var(--ef-color-signal-black-60);
		font-size: var(--fs-12);
	}
}

/* logos */
.ef-logo-short {
	width: 50px;
	height: 65px;
	position: absolute;
	top: 0;
	left: -90px;

	@media (max-width: 768px) {
		position: static;
	}
}

/* lists */
.list-items {
	display: flex;
	flex-direction: column;
	gap: 4px;

	/*@media (max-width: 992px) {
		min-width: max-content;
	}*/

	& .list-row {
		display: grid;
		align-items: center;
		gap: 40px;
		padding: 14px 16px;
		background: var(--ef-color-signal-black-4);
		border-radius: 4px;

		&:not(.title-row, .empty-row):hover {
			background: var(--ef-color-signal-black-8);
		}

		& .title-column {
			grid-area: title;
		}

		& .update-column {
			grid-area: updated;
		}

		& .tools-column {
			grid-area: tools;
		}

		&.empty-row {
			grid-template-columns: 1fr !important;
		}
	}

	&.layout-list-items {
		& .list-row {	
			grid-template-areas: "title updated tools";
			grid-template-columns: 1fr max-content max-content;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"title tools" 
					"updated tools";
				grid-template-columns: 1fr max-content;
				gap: 10px;
			}
			
			& .title-column {
				grid-area: title;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.participants-list-items {
		& .list-row {
			grid-template-areas: "title group participants updated tools";
			grid-template-columns: 1fr max-content max-content max-content max-content;

			@media (max-width: 768px) {
				grid-template-areas: 
					"title title title tools" 
					"updated group participants tools";
				grid-template-columns: 1fr 1fr 1fr max-content;
				gap: 10px;
			}

			@media (max-width: 576px) {
				grid-template-areas: 
					"title title tools" 
					"updated updated tools"
					"group participants tools";
				grid-template-columns: 1fr 1fr max-content;
				gap: 10px;
			}

			& .title-column {
				grid-area: title;
			}

			& .group-column {
				grid-area: group;
			}

			& .participants-column {
				grid-area: participants;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.template-list-items {
		& .list-row {
			grid-template-areas: "title updated tools";
			grid-template-columns: 1fr max-content max-content;
			gap: 16px;

			/*@media (max-width: 768px) {
				grid-template-areas: 
					"title title title tools" 
					"updated group participants tools";
				grid-template-columns: 1fr 1fr 1fr max-content;
				gap: 10px;
			}*/

			& .title-column {
				grid-area: title;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.delete-list-items {
		& .list-row {
			grid-template-areas: "title description updated tools";
			grid-template-columns: 200px 1fr max-content max-content;
			gap: 16px;

			@media (max-width: 768px) {
				grid-template-areas: 
					"title title tools" 
					"description updated tools";
				grid-template-columns: 1fr 1fr max-content;
			}

			& .title-column {
				grid-area: title;
			}

			& .description-column {
				grid-area: description;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.invoice-order-list-items {
		& .list-row {
			grid-template-columns: 50px 130px 80px 60px 80px 110px 120px;
		}
	}

	&.account-list-items {
		& .list-row {
			grid-template-areas: "name email custom1 custom2 login buttons";
			grid-template-columns: max-content 1fr max-content max-content 1fr max-content;

			/*@media (max-width: 768px) {
				grid-template-areas: 
					"name name"
					"email login"
					"custom1 custom2"
					"buttons buttons";
				grid-template-columns: 1fr 1fr;
				gap: 10px;
			}

			@media (max-width: 992px) {
				grid-template-areas: 
					"name name login" 
					"custom1 custom2 buttons";
				grid-template-columns: 1fr 1fr 1fr max-content;
				gap: 10px;
			}*/

			& .name-column {
				grid-area: name;
			}

			& .custom1-column {
				grid-area: custom1;
			}

			& .custom2-column {
				grid-area: custom2;
			}
	
			& .email-column {
				grid-area: email;
			}
	
			& .login-column {
				grid-area: login;
			}

			& .buttons-column {
				grid-area: buttons;
			}
		}
	}

	&.email-invite-list-items {
		& .list-row {	
			grid-template-areas: "title updated tools";
			grid-template-columns: 1fr max-content max-content;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"title title" 
					"updated tools";
				grid-template-columns: 1fr max-content;
				gap: 10px;
			}

			&.has-status-data {
				grid-template-areas: "title status";
				grid-template-columns: 1fr max-content;
		
				@media (max-width: 768px) {
					grid-template-areas: 
						"title" 
						"status";
					grid-template-columns: 1fr;
					gap: 10px;
				}

				& .status-column {
					grid-area: status;
				}
			}
			
			& .title-column {
				grid-area: title;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.participant-group-list-items {
		& .list-row {	
			grid-template-areas: "title tools";
			grid-template-columns: 1fr max-content;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"title" 
					"tools";
				grid-template-columns: 1fr;
				gap: 10px;
			}			
			
			& .title-column {
				grid-area: title;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.label-list-items {
		& .list-row {	
			grid-template-areas: "colorCol labelName labelDesc saveDelete";
			grid-template-columns: max-content 200px 1fr max-content;
			gap: 16px;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"colorCol labelName saveDelete" 
					"labelDesc labelDesc .";
				grid-template-columns: max-content 1fr max-content;
				gap: 10px;
			}			
			
			& .color-column {
				grid-area: colorCol;
			}
	
			& .label-name-column {
				grid-area: labelName;
			}

			& .label-description-column {
				grid-area: labelDesc;
			}

			& .save-delete-column {
				grid-area: saveDelete;
			}
		}
	}

	&.label-list-items-modal {
		& .list-row {	
			grid-template-areas: "lableCheckbox colorCol labelName labelDesc saveDelete";
			grid-template-columns: max-content max-content 200px 1fr max-content;
			gap: 16px;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"lableCheckbox colorCol labelName ." 
					"lableCheckbox labelDesc labelDesc saveDelete";
				grid-template-columns: max-content max-content 1fr max-content;
				gap: 10px;
			}	
			
			& .label-checkbox {
				grid-area: lableCheckbox;
			}
			
			& .color-column {
				grid-area: colorCol;
			}

			& .label-checkbox-modal {
				text-align: center;
				grid-area: labelCheckboxModal;
			}
	
			& .label-name-column {
				grid-area: labelName;
			}

			& .label-description-column {
				grid-area: labelDesc;
			}

			& .save-delete-column {
				grid-area: saveDelete;
			}
		}
	}
}

/* register page */
.register-page {
	container: surveyCard / inline-size;

	& .register-page-content {
		height: 100vh;
		display: grid;
		grid-template-areas: "leftSide rightSide";
		grid-template-columns: 2fr 1fr;

		@container (max-width: 900px) {
			grid-template-areas: 
				"leftSide"
				"rightSide";
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr;
		}

		& .left-column {
			grid-area: leftSide;
		}

		& .right-column {
			font-size: 16px;
			grid-area: rightSide;
		}
	}
}

/* Share icons */
.icon-fb {
	color: #3B5998;
}
.icon-twitter-x {
	color: #000000;
}
.icon-linkedin {
	color: #0E76A8;
}

/* TNL M */
#data_teilnehmer_emailliste {
	& .row {
		margin: 0;
	}
}

/* Media list */
.media-list {
	display: flex;
	flex-direction: column;	
	gap: 16px;

	& .media {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 8px 16px;
		border-radius: 8px;

		&:hover {
			background: var(--ef-color-signal-black-4);
		}

		&.user-item {
			border-radius: 8px;
			padding: 16px 24px;
			display: grid;
			grid-template-areas: 
				"profile user-item--body settings"
				"profile user-item--body settings";
			grid-template-columns: 48px 1fr 32px;
			gap: 16px;

			& .user-item--left {
				grid-area: profile;
				align-self: start;
			}

			/*& .user-item--header {
				grid-area: user-item--header;
			}*/

			& .user-item--body {
				grid-area: user-item--body;
			}

			& .user-item--right {
				grid-area: settings;
				align-self: start;
			}

			/*& .buttons-column {
				justify-self: end;
			}

			&:has(+ .group-item) {
				margin-top: 5px;				
			}*/
		}

		&.group-item {
			margin-top: 5px;
		}

		&.media-group {
			justify-content: space-between;
			background: var(--ef-color-signal-black-8);

			&:hover {
				background: var(--ef-color-signal-black-16);
			}
		}

		&.role-item {
			display: flex;
			gap: 16px;
			border-radius: 8px;
			padding: 16px 24px;
		}

		&.media-lvl0 {
			margin-top: 48px;
		}

		&.media-lvl1 {
			margin-left: 40px;
		}

		&.media-lvl2 {
			margin-left: 80px;
		}

		&.media-lvl3 {
			margin-left: 120px;
		}

		&.media-lvl4 {
			margin-left: 160px;
		}
	}
}

/* E-Mail Invitation */
/*#mailinvite-section {
	@media (max-width: 768px) {
		box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
	}
}*/

.tab-full {
	& .email-tab-header,
	& .email-tab-layout,
	& .email-tab-footer {
		display: grid;
		grid-template-columns: 1fr;
	}

	& .email-tab-layout {
		& .left-part {
			clip-path: inset(0px -20px 0px -20px);
		}
	}
}

.email-tab-header,
.email-tab-footer {
	display: grid;
	grid-template-columns: 1fr 360px;
	background: var(--ef-color-white);

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
	}
}

.email-tab-header {
	& .left-part {
		padding: 16px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
		border-bottom: 1px solid var(--ef-color-signal-black-8);

		@media (max-width: 768px) {
			order: 1;
		}
	}

	& .right-part {
		padding: 16px;

		@media (max-width: 768px) {
			order: 0;
		}
	}
}

.email-tab-footer {
	& .left-part {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
		padding: 16px;
		clip-path: inset(0px -20px -20px -20px);
		border-top: 1px solid var(--ef-color-signal-black-8);
	}

	& .right-part {
	}
}

.email-tab-layout {
	display: grid;
	grid-template-columns: 1fr 360px;

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
	}

	& .left-part {
		display: flex;
		flex-direction: column;
		box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
		clip-path: inset(0px 0px 0px -20px);

		@media (max-width: 768px) {
			clip-path: inset(0px -20px 0 -20px);
			order: 1;
		}

		& .cke_editor_remindertext,
		& .cke_editor_mailtext {
			flex-grow: 1;

			& .cke_top {
				padding: 16px; 
				border-bottom: 1px solid var(--ef-color-signal-black-8);
			}

			& .cke_contents {
				padding: 16px;
			}
		}
	}

	& .right-part {
		padding: 32px;
		background: var(--ef-color-signal-black-8);
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		box-shadow: inset 20px 0px 25px -25px rgba(0,0,0,0.29);

		@media (max-width: 768px) {
			box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
			clip-path: inset(0px -20px 0 -20px);
			border-radius: 0;
			order: 0;
		}

		/*input {
			background: var(--ef-color-signal-black-16);
		}*/
	}
}

.layoutEditorPreview {
    display: block;
    /* border-top: 1px solid #b9b9b9 */
}

.list-group-item {
	display: grid;
	grid-template-columns: max-content 1fr max-content;
	gap: 16px;
}

.statsMenu {
	position: absolute;
    top: 10px;
    left: 50%;
    right: 0;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    transform: translateX(-50%);
	box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.16);

	@media (max-width: 1200px) {
		max-width: 100%;
		left: 0;
		transform: translateX(0);
	}
}

.single-result-layout-top {
	display: grid;
	grid-template-areas:
		"top-left top-right";
	grid-template-columns: 1fr 3fr;

	& .top-left-col {
		grid-area: top-left;
	}

	& .top-right-col {
		grid-area: top-right;
	}
}

.single-result-layout-bottom {
	display: grid;
	grid-template-areas:
		"center-left center-right";
	grid-template-columns: 1fr 3fr; 

	&.no-content {
		grid-template-columns: 1fr 3fr;
		grid-template-areas:
			"no-content no-content";
	}

	& .center-left-col {
		grid-area: center-left;
	}

	& .center-right-col {
		grid-area: center-right;

		display: grid;
		grid-template-columns: 1fr;
    	grid-template-rows: max-content 1fr;
		min-height: 1000px;
	}

	& .no-content-col {
		grid-area: no-content;
	}
}

.questionFilterContainer {
	& .questionAnswerContainer {
		position: relative;

		& .deleteAnswer {
			position: absolute;
			top: 50%;
			right: -16px;
			transform: translate(100%, -50%);
		}
	}

	& .questionFilterAnswer > .questionAnswerContainer + .logicConnection + .questionAnswerContainer {
		justify-content: end;
	}
}

.dashboard-content {
	container: dashboardContent / inline-size;

	& .group-content {
		display: grid;
		gap: 24px;
		grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));

		&:has(> :only-child) {
			& .group-card {
				max-width: min(400px, 100%);
			}
		}

		& .group-card {
			max-width: 100%;
			min-height: 420px;
			border-radius: 8px;
			padding: 24px 32px;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: max-content 1fr max-content;
			gap: 32px;	

			&:hover {
				background: var(--ef-color-signal-black-4);
			}

			/*& .group-card--header {
				grid-area: card-header;
			}*/

			& .group-card--body {
				/*grid-area: card-body;*/
				align-self: start;
			}

			/*& .group-card--footer {
				grid-area: card-footer;
			}*/
		}
	}
}

.main_wizard {
	--sidebar-width: 500px;
	--sidebar-desktop-flap-top: 276px;
	--sidebar-mobile-flap-top: 230px;

	& .sidebar-close {
		& i {
			color: var(--ef-color-white);
		}
	}

	& .main_wizard--left {
		background: var(--ef-color-signal-black-100);
		color: var(--ef-color-white);

		& .sidebar__flap {
			background: var(--ef-color-signal-black-100);

			&:hover,
			&:focus {
				background: hsl(from var(--ef-color-signal-black-100) h s calc(l + 10));
				color: var(--ef-color-white);
			}
		}

		& .wizard-content--left {
			padding: 50px 80px;

			@media (max-width: 768px) {
				padding: 40px;
			}
		}
	}

	& .main_wizard--right {
	}

	& .template-category {
		& .template-items {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
			gap: 16px;

			& :only-child {
				max-width: 255px;
			}
		}
	}
}

.comp-sidebar-content {
	--sidebar-comp-width: var(--sidebar-width, 320px);
	--sidebar-comp-desktop-flap-top: var(--sidebar-desktop-flap-top, 80px);
	--sidebar-comp-mobile-flap-top: var(--sidebar-mobile-flap-top, 40px);
	--sidebar-comp-height-correction: var(--sidebar-height-correction, 0px);
	--sidebar-comp-x-translate-correction: var(--sidebar-x-translate-correction, 0px);
	position: relative;

	& .sidebar-container {
		z-index: 2;
		width: var(--sidebar-comp-width);
		display: grid;
		grid-template-areas:
			"mobileClose"
			"content";
		grid-template-rows: max-content 1fr;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		transform: translate(0);
		transition: transform linear 250ms, width linear 250ms;
		height: calc(100vh - var(--sidebar-comp-height-correction));

		@media (max-width: 992px) {
			transform: translateX(calc(-100% - var(--sidebar-comp-x-translate-correction)));
		}

		@media (max-width: 768px) {
			width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));
			/*background: white;*/
		}

		& .sidebar__flap {
			z-index: 9999;
			position: absolute;
			top: var(--sidebar-comp-desktop-flap-top);
			left: 100%;
			width: 40px;
			height: 40px;
			cursor: pointer;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			font-size: 18px;

			@media (max-width: 768px) {
				top: var(--sidebar-comp-mobile-flap-top);				
			}

			@media (max-width: 768px) {
				.flap-close {		
					transform: rotate(180deg);
				}
			}
		}

		& .sidebar-close {
			grid-area: mobileClose;

			@media (max-width: 768px) {
				padding: 10px 35px;
			}

			@media (min-width: 769px) {
				display: none !important;
			}
		}

		&.open {
			transform: translateX(0);

			& .sidebar__flap {
				display: none;

				@media (max-width: 768px) {
					display: none !important;		
				}
			}

			& .sidebar__mobile-background {
				opacity: 1;
				width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));
				transition-delay: 250ms;
			}
		}

		& .sidebar__content {
			grid-area: content;
			overflow-y: auto;
			height: 100%;

			@media (max-width: 768px) {
				padding-top: 0;
			}
		}

		& .sidebar__mobile-background {
			transition: opacity linear 200ms;
			background: rgba(var(--ef-color-signal-black-100-rgb), 0.4);
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			opacity: 0;
		}
	}

	& .content-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--sidebar-comp-width);
		right: 0;
		overflow-y: auto;
		transition: left linear 250ms;
		height: calc(100vh - var(--sidebar-comp-height-correction));
		display: grid;
    	grid-template-rows: max-content 1fr;
		scroll-behavior: smooth;

		@media (max-width: 992px) {
			left: 0;
		}

		& .survey-question-preview {
			align-self: center;
		}
	}
}

.comp-sidebar-content-v2 {
	--sidebar-comp-width: var(--sidebar-width, 320px);
	--sidebar-comp-desktop-flap-top: var(--sidebar-desktop-flap-top, 80px);
	--sidebar-comp-mobile-flap-top: var(--sidebar-mobile-flap-top, 40px);
	--sidebar-comp-height-correction: var(--sidebar-height-correction, 0px);
	--sidebar-comp-x-translate-correction: var(--sidebar-x-translate-correction, 0px);
	--sidebar-comp-sticky-top-position: calc(var(--global-header-height, 0px) - var(--global-main-header-height, 0px) + var(--sidebar-sticky-top-position, 0px));
	
	display: grid;
    grid-template-columns: 0 1fr;

	transition: grid-template-columns linear 250ms;

	&.open {		
		@media (min-width: 1295px) {		
			grid-template-columns: var(--sidebar-comp-width) 1fr;

			& .sidebar-container {
				width: var(--sidebar-comp-width);
			}

			& .content-container {
				margin-left: 32px;
				width: calc(100vw - var(--sidebar-comp-width) - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction) - 32px);
			}
		}

		& .sidebar-container {
			width: var(--sidebar-comp-width);			

			@media (max-width: 1294px) {
				& .sidebar__mobile-background {
					display: block;
				}
			}

			@media (min-width: 769px) {
				& .sidebar__content {
					padding-right: 10px;
				}
			}

			@media (max-width: 768px) {
				height: auto;
				width: calc(100vw - 48px);
				background: white;

				& .sidebar-close {
					display: inline-flex;
				}

				&.open {
					& .sidebar__flap {
						display: none;
					}
				}

				& .sidebar__content {
					padding-right: 0;
					padding-top: 0;
				}
			}
		}

		@media (max-width: 768px) {
			& .content-container {
				display: none;
			}
		}
	}

	& .sidebar-container {
		z-index: 2;
		display: grid;
		grid-template-areas:
			"mobileClose"
			"content";
		grid-template-rows: max-content 1fr;
		position: sticky;
		top: var(--sidebar-comp-sticky-top-position);
		bottom: 0;
		left: 0;
		transform: none;
		transition: width linear 250ms;
		height: calc(100vh - var(--sidebar-comp-height-correction));
		width: 0px;

		/*@media (max-width: 1110px) {
			top: calc(var(--sidebar-comp-sticky-top-position) + 64px);
		}*/

		& .sidebar__flap {
			z-index: 9999;
			position: absolute;
			top: var(--sidebar-comp-desktop-flap-top);
			left: 100%;
			width: 40px;
			height: 40px;
			cursor: pointer;
			border-radius: 50%;
			font-size: 18px;
			margin-left: 10px;
			margin-top: -32px;
		}

		& .sidebar-close {
			grid-area: mobileClose;
			display: none;
			padding: 10px 16px;
			background: white;
			position: sticky;
			top: var(--sidebar-comp-sticky-top-position);
			z-index: 1;
		}

		& .sidebar__flap {
			display: flex;
		}

		&.open {
			& .sidebar__flap {}

			& .sidebar__mobile-background {
				opacity: 1;
				width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));
				transition-delay: 250ms;

				@media (max-width: 992px) {
					width: calc(100vw - 48px);				
				}
			}
		}

		& .sidebar__content {
			grid-area: content;
			overflow-y: auto;
			height: 100%;
			padding-right: 0;
			padding: 64px 0;
		}

		& .sidebar__mobile-background {
			transition: opacity linear 200ms;
			background: rgba(var(--ef-color-signal-black-100-rgb), 0.4);
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			opacity: 0;
			display: none;
		}
	}

	& .content-container {
		transition: width linear 250ms;
		padding: 64px 0 0;
		width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));

		@media (max-width: 1294px) {
			margin-left: 0;
			width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));
		}

		@media (max-width: 992px) {
			width: calc(100vw - 48px);				
		}
	}
}

.nested-sidebar-content {
	--sidebar-width: 440px;
	--sidebar-desktop-flap-top: 40px;
	--sidebar-mobile-flap-top: 40px;
	--sidebar-height-correction: 192px;
	--sidebar-x-translate-correction: 24px;
	position: relative;
	height: calc(100vh - var(--sidebar-height-correction));

	& .sidebar-container {
		& .sidebar__flap {
			background: var(--ef-color-signal-black-4);
		}

		& .sidebar__content {
			border-radius: 8px;
			padding: 40px;
			background: var(--ef-color-signal-black-4);
		}
	}

	& .content-container {
		@media (min-width: 992px) {
			padding-left: 64px;
		}

		& .sticky-section {
			position: sticky;
			top: 0;
			z-index: 1;
		}

		& .survey-question-preview {
			transform: translateY(-42px);

			&.has-info-box {
				transform: translateY(-120px);
			}

			& .fake-div {
				height: 80px;
			}
		}
	}
}

.nested-sidebar-content-v2 {
	--sidebar-width: 320px;
	--sidebar-desktop-flap-top: 40px;
	--sidebar-mobile-flap-top: 40px;
	--sidebar-height-correction: 320px;
	--sidebar-x-translate-correction: 24px;
	position: relative;
	height: calc(100vh - var(--sidebar-height-correction));

	& .sidebar-container {
		& .sidebar__flap {
			background: var(--ef-color-signal-black-4);
		}

		& .sidebar__content {
			background: white;
			padding-right: 10px;
		}
	}

	& .content-container {
		@media (min-width: 992px) {
			padding-left: 32px;
		}
	}
}

.nested-sidebar-content-v3 {
	--sidebar-width: 320px;
	--sidebar-desktop-flap-top: 64px;
	--sidebar-mobile-flap-top: 64px;
	--sidebar-height-correction: 128px;
	--sidebar-x-translate-correction: 64px;

	& .sidebar-container {
		& .sidebar__flap {
			background: var(--ef-color-signal-black-8);
			
			& .flap-close {
				@media (max-width: 768px) {				
					transform: rotate(180deg);
				}
			}
		}

		& .sidebar__content {
			background: white;
		}
	}
}

.preview-demo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--ef-color-white);
	height: 100vh;
	z-index: 10;
	overflow: hidden;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;

	& .header {
		display: grid;
		grid-template-areas: "back navi tools";
		grid-template-columns: 100px 1fr 100px;
		grid-template-rows: 1fr;
		background: white;

		& .back-section {
			grid-area: back;
			justify-self: start;
		}

		& .subnavi {
			grid-area: navi;
			justify-self: center;
		}

		& > :nth-child(3) {
			grid-area: tools;
			justify-self: end;
		}
	}

	.preview-content {
		display: grid;
		grid-template-rows: 64px 1fr;

		.preview-header {
			padding-inline: 40px;

			@media (max-width: 992px) {
				padding-inline: 24px;
			}
		}

		.preview-body {
			display: flex;
			justify-content: center;
			height: calc(100vh - 64px);
			overflow: auto;

			@media (min-height: 905px) {
				align-items: center;
			}			

			@media (min-width: 768px) {
				padding: 40px;
				padding-top: 0px;
			}
			
			iframe {				
				border: 1px solid #ccc;
				border-radius: 10px;

				&.sim-device-width-desktop {
					width: 100%;

					@media (min-width: 769px) {
						height: calc(100vh - 104px);
					}

					@media (max-width: 768px) {
						height: calc(100vh - 64px);
					}
				}

				&.sim-device-width-tablet {
					width: 992px;
				}

				&.sim-device-width-mobile {
					width: 400px;
					@media (min-height: 905px) {
						min-height: 800px;						
					}
					
					@media (max-height: 904px) {
						min-height: calc(100vh - 64px);
					}
				}
			}
		}
	}
}

/** Umfrage - Fragetypen **/
/*.survey-welcome-page {
	& .survey-question-container {
		margin-bottom: 40px;
	}
}*/

.survey-question-container {
	/*--test-color: #000000;*/
	font-size: 16px;
	margin-bottom: 200px;

	&.survey-page-title {
		margin-bottom: 40px;
	}

	&.question-disabled {
		opacity: 0.75;
	}

	& .question-item {
		display: flex;
		flex-direction: column;

		/*background: red;*/

		& .question-header {
			display: flex;
			flex-direction: column;
			margin-bottom: 9px;

			/*background: lime;*/

			& .questiontitle {
				font-size: 24px;
				margin: 0;
				margin-bottom: 15px;
			}

			& .note {
				margin: 0;
				margin-bottom: 15px;
				color: #6e727a;
			}	
		}

		& .question-body {
			display: flex;
			flex-direction: column;
			overflow-y: hidden;
            overflow-x: auto;
			
			& .additionalTextareaWrapper {
				margin-top: 30px;
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

			& .btn-na {
				margin-top: 50px;
			}

			& table {
				&.table-blank {
					& td {
						padding-block: 4px;
					}
				}
			}

			& input {
				&[type="text"] {
					background: white;
					border-color: #000;
					border-radius: 3px;

					&:hover {
						outline: none !important;
					}

					&:focus {
						border-color: transparent;
						outline: 2px solid var(--ef-color-indiablue) !important;
					}
				}
			}

			& .form-select {
				background-color: rgba(0, 0, 0, 0.1);
				border: 1px solid rgba(0, 0, 0, 0.1);
				border-radius: 3px;
				min-width: 250px;
			}

			/*background: blue;*/
		}
	}

	/*&.questiontype-1,
	&.questiontype-2,
	&.questiontype-3,
	&.questiontype-4,
	&.questiontype-5,
	&.questiontype-6,
	&.questiontype-7,
	&.questiontype-8,
	&.questiontype-9,
	&.questiontype-10,
	&.questiontype-11,
	&.questiontype-12 {
		& .question-body {
			gap: 16px; 
		}
	}*/

	&.questiontype-1 {
		& .question-body {			
			& > div {
				&:has( .radio-inline) {
					display: flex;
					align-items: center;
					gap: 16px;
				}
			}

			& .btn-na {
				&:not(.btn-na-image) {
					min-width: 140px;
				}
			}
		}
	}

	&.questiontype-3 {
		& .question-body {
			& .table-nse {
				& input[type="text"] {
					background: var(--ef-color-signal-black-8) !important;
				}
			}
		}
	}

	/*&.questiontype-2 {
		background: hsl(from var(--test-color) h s calc(l + 15));
	}

	&.questiontype-3 {
		background: hsl(from var(--test-color) h s calc(l + 20));
	}

	&.questiontype-4 {
		background: hsl(from var(--test-color) h s calc(l + 25));
	}

	&.questiontype-5 {
		background: hsl(from var(--test-color) h s calc(l + 30));
	}

	&.questiontype-6 {
		background: hsl(from var(--test-color) h s calc(l + 35));
	}

	&.questiontype-7 {
		background: hsl(from var(--test-color) h s calc(l + 40));
	}

	&.questiontype-8 {
		background: hsl(from var(--test-color) h s calc(l + 45));
	}

	&.questiontype-9 {
		background: hsl(from var(--test-color) h s calc(l + 50));
	}
	
	&.questiontype-10 {
		background: hsl(from var(--test-color) h s calc(l + 50));
	}

	&.questiontype-11 {
		background: hsl(from var(--test-color) h s calc(l + 50));
	}

	&.questiontype-12 {
		background: hsl(from var(--test-color) h s calc(l + 50));
	}
	*/
}

.survey-question-container,
.question-preview-body {
	& label {
		&[class*="as-checkbox"] {
			& input {
				&[type="checkbox"] {
					& ~ .check-mark {
						border-color: rgb(48, 53, 64);
					}
				}
			}
		}

		& input {		
			&[type="radio"] {
				& ~ .check-mark {
					border-color: rgb(48, 53, 64);
					background: transparent;
				}
			}
		}
	}
}

.question-preview-body {
	& table {
		&:not(.table-nse) {
			& input {
				&:not(.form-underline) {
					&[type="text"] {
						background: white;
						border-color: #000;
						border-radius: 3px;

						&:hover {
							outline: none !important;
						}

						&:focus {
							border-color: transparent;
							outline: 2px solid var(--ef-color-indiablue) !important;
						}
					}
				}
			}
		}
	}
}

.survey-question-container,
.survey-container-preview {
	& textarea {
		&:not(.form-underline) {
			border: 1px solid rgba(0,0,0,1);
			border-radius: 3px;

			&:hover {
				outline: none !important;
			}

			&:focus {
				border-color: transparent;
				outline: 2px solid var(--ef-color-indiablue) !important;
				/*border: 1px solid rgba(0,0,0,1) !important;	*/
			}
		}

		&.form-underline {
			&:hover,
			&:focus {
				outline: none !important;
			}
		}
	}
}

.survey-welcome-page,
.survey-content-footer {
	& .survey-question-container {
		margin-bottom: 60px;
	}
}

.survey-question-preview {
	& .table-answer1,
	& .table-answer2 {
		& td {
			padding-block: 4px;
		}
	}
}

.ranking-wrapper {
	& .ranking-drop-zone,
	& .ranking-drag-zone {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	& .ranking-drop-zone {
	}

	& .ranking-drag-zone {
		padding: 20px;		
		display: flex;
		flex-direction: column;
		gap: 4px;

		& .question-ranking {
			background: rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			padding: 10px 15px;
			color: rgb(48, 53, 64);

			& .question-ranking-move {
				& .bi {
					font-size: 25px;
				}
			}

			& .question-ranking-answer {
				flex: 1 1 auto;
			}
		}
	}
}

.matrix-white-boxes-block {
	display: grid;
	grid-template-columns: 1fr 1.5fr 1fr;
	gap: 4px;
}

.validation_fields {
	display: flex;
	flex-direction: column;
	/*gap: 16px;*/

	& .validation_field {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 16px 0;

		& + .validation_field {
			border-top: 1px solid rgba(var(--ef-color-signal-black-60-rgb), 0.25);
		}
	}

	& .validation_field_title {
		font-family: 'Lato Bold';

		&:empty {
			display: none;
		}
	}

	& .validation_field_type,
	& .validation_field_settings {
		display: flex;
		align-items: center;
		gap: 16px;

		&:empty {
			display: none;
		}
	}
}

.checkbox-content,
.radio-content {
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));

	& .btn-na {
		min-width: auto;
	}
}

.question-preview-body {
	margin-top: 23px;
}

.survey-question-container-anchor {
	transform: translateY(-200px);
	display: block;
}

body .cke_chrome {
	border: 1px solid #999;
}

.add-question-nav {
	& li {
		& a {
			&.active {
				--btn-bg: var(--ef-color-signal-black-8);
				border-color: var(--ef-color-signal-black-8);
			}
		}
	}
}

.survey-editor-preview-nav-item-placeholder {
  min-height: 34px;
  border: 2px dashed var(--ef-color-signal-black-16);
  //background: rgba(var(--ef-color-indiablue-rgb), 0.16);
  background: rgba(var(--ef-color-yellow-rgb), 0.16);
  border-radius: 4px;
}

.sticky-section {
	--_sticky-default-pos: var(--custom-sticky-default-pos, 0px);
	
	z-index: 4;
	position: sticky;
	top: calc(var(--global-header-height, 0px) + var(--_sticky-default-pos));
	width: max-content;
    left: var(--sticky-left-correction, 50%);
	transform: translateX(-50%);
}

.ace-editor {
    position: relative;
    width: 100%;
    min-height: 340px;
	font-size: 12px;
}

.floating-banner {
	border: 3px solid #E6E6E6;
	position: fixed;
	right: 16px;
	left: 16px;
	bottom: 16px;
	padding: 32px;
	border-radius: 8px;
	z-index: 6;
	max-width: 100%;

	& .close-btn {
		position: absolute;
		top: 8px;
		right: 8px;
	}

	@media (min-width: 992px) {
		max-width: 490px;
		left: auto;		
		right: 32px;
		bottom: 32px;
	}
}

.demo-banner {
	background: red;

	@media (max-width: 576px) {
		& img {
			width: 35%;
		}
	}
}

#chat-agent {
	display: grid;
	grid-template-rows: max-content 1fr max-content;
}

.agent-chat-message {
	width: max-content;
	max-width: 75%;
	border-radius: 8px;
	background: var(--ef-color-signal-black-8);
	padding: 8px;

	& .typing-indicator {
		height: 19px; 
		
		& .typing-dot {
			width: 8px;
			height: 8px;
			background-color: #6c757d;
			border-radius: 50%;
			animation: typing-bounce 1.4s infinite ease-in-out both;

			&:nth-child(1) { animation-delay: -0.32s; }
			&:nth-child(2) { animation-delay: -0.16s; }
			&:nth-child(3) { animation-delay: 0s; }
		}
	}	
}

@keyframes typing-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
	40% { transform: scale(1); opacity: 1; }
}

/* 	
	#####
		Slideout Component 
	#####
*/
.slide-out {
	width: 100%;
	max-width: 500px;
	z-index: 15;
	position: fixed;
	top: 0;
	bottom: 0;
	height: 100%;
	background: white;
	transition: transform ease-in-out 250ms;

	@media (max-width: 576px) {
		max-width: 100%;
	}

	&.slide-in-from-right {
		right: 0;
		transform: translateX(100%);

		&.open {
			transform: translateX(0);
		}
	}

	&.slide-in-from-left {
		left: 0;
		transform: translateX(-100%);

		&.open {
			transform: translateX(0);
		}
	}

	& .slide-out-content {
		padding: 32px;

		@media (max-width: 768px) {
			padding: 20px;
		}
	}
}

/* 	
	#####
		Mailserver Settings
	#####
*/
.ranking-btn-on{ background-color:#0299a2; }
#oauth_fields .form-group { margin-top: 10px; }
.auth-method-toggle { margin-bottom: 15px; }
.provider-specific { display: none; }
.oauth-option { margin-bottom: 10px; padding: 10px; border-left: 4px solid #ddd; }
.oauth-option.google { border-left-color: #4285f4; }
.oauth-option.azure { border-left-color: #0078d4; }
.oauth-option.azuregraph { border-left-color: #00a4ef; }
.oauth-option.active { background-color: #f8f9fa; }

.page-layout-type {
	min-height: 600px;

	@media (min-width: 993px) {
		max-height: 900px;
	}

	& .left-col {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px;

		@media (min-width: 993px) {
			max-height: 900px;
		}

		&:has(img:not(.img-cover)) {
			padding: 30px;

			& img {
				height: 100%;
			}
		}

		&:has(img.img-cover) {
			min-height: 350px;

			@media (max-width: 992px) {
				max-height: 350px;
			}
		}

		& img {
			object-fit: contain;
			object-position: center;
			max-width: 100%;

			&.img-cover {
				position: absolute;
				inset: 0;
				object-fit: cover;
				height: 100%;
				width: 100%;
			}
		}
	}

	& .right-col {
		@media (min-width: 993px) {
			max-height: 900px;
			padding: 40px;
		}

		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		overflow-y: auto;
	}

	&.page-layout-inverted {
		& .left-col {
			order: 1;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		& .right-col {
			order: 0;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		& .left-col,
		& .right-col {
			@media (max-width: 992px) {
				order: unset;
			}
		}
	}
}

.survey-end-of-page {
	position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.survey-welcome-page,
.survey-end-page {
	& .survey-end-of-page {
		bottom: 60px;
	}
}

.integration-item,
.webhook-item {
	display: grid;
	grid-template-columns: max-content 1fr max-content;
	grid-template-areas: "toggle content tools";
	align-items: start;
	gap: 16px;

	& .integration-toggle,
	& .webhook-toggle {
		grid-area: toggle;
		align-self: center;
	} 

	& .integration-content,
	& .webhook-content {
		grid-area: content;

		& > div {
			& > div {
				min-width: 25%;
			}
		}
	} 

	& .integration-tools,
	& .webhook-tools {
		grid-area: tools;
	} 

	@media (max-width: 768px) {
		grid-template-columns: 1fr max-content;
		grid-template-areas: 
			"toggle tools"
			"content content";
	}
}

.translation-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	align-items: center;

	@media (min-width: 768px) {
		gap: 32px;
		grid-template-columns: 40% 1fr;
	}
}

@media (max-width: 768px) {
	.mobile-absolute {
		position: absolute;
		right: 16px;
	}
}

.fake-scroller {
	position: sticky;
	top: calc(var(--global-header-height) - var(--global-main-header-height));
	height: 16px;
	width: 100%;
	z-index: 3;
	overflow-x: auto;
	margin-top: -16px;
}

.diagram-legend {
	max-width: 70%;
	margin: auto;
}

.filter-row-layout-1 {
	& .filterHinweis {
		max-width: none !important;;
	}

	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;

	@media (min-width: 768px) {
		justify-items: start;
    	grid-template-columns: 150px 1fr max-content 1fr 150px;
	}
}

.filter-row-layout-2 {
	& .filterHinweis {
		max-width: none !important;;
	}

	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;

	@media (min-width: 768px) {
		justify-items: start;
    	grid-template-columns: 150px 1fr 1fr 1fr;
	}
}

/* Die Umfragenliste ist paginiert (siehe surveyListing.tpl): im DOM steht
   immer nur die aktuelle Seite. Der Pager bleibt leer, wenn es nur eine gibt. */
.listing-pager:not(:empty) {
	margin-top: 16px;
}

/* Aktionsleiste der Umfragenliste: "Neue Umfrage" links, Filter/Suche/Labels
   rechts, Massenaktionen darunter. Bleibt beim Scrollen oben stehen - gescrollt
   wird auf dem Dashboard .container-page, sticky bezieht sich darauf. */
/* Sticky misst ab der Padding-Kante des Scroll-Containers, .container-page hat
   oben 40px (bis 992px: 60px). Der negative Wert holt die Leiste buendig an die
   Containeroberkante, also direkt unter das Banner. Die Hoehe der Leiste setzt
   index.tpl per ResizeObserver, damit die Abschnittstitel darunter andocken. */
.page-content.dashboard {
	--listing-sticky-top: -40px;
	--listing-actions-bar-height: 56px;
}

@media (max-width: 992px) {
	.page-content.dashboard {
		--listing-sticky-top: -60px;
	}
}

#survey-actions-bar {
	position: sticky;
	top: var(--listing-sticky-top, -40px);
	z-index: 3;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;

	/* Hintergrund noetig, sonst scrollen die Karten sichtbar durch */
	padding: 16px 0;
	background-color: var(--ef-color-white, #fff);
}

/* "Neue Umfrage" und die Massenaktionen bilden die linke Gruppe, die
   Filterleiste wird nach rechts geschoben. */
#survey-actions-bar > .action-bar {
	margin-left: auto;
}

/* Auf schmalen Viewports stehen die drei Gruppen von vornherein untereinander -
   "Neue Umfrage", Massenaktionen, Filterleiste. Mit flex-wrap allein haengt die
   Aufteilung davon ab, was gerade passt, und springt beim Ein- und Ausblenden
   der Massenaktionen um. */
@media (max-width: 767.98px) {
	#survey-actions-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	/* In einer Spalte gibt es nichts nach rechts zu schieben. Zentriert wird die
	   Filterleiste ueber ihre Bootstrap-Klasse am Element - die Utilities tragen
	   !important und waeren von hier aus ohnehin nicht zu ueberschreiben. */
	#survey-actions-bar > .action-bar {
		margin-left: 0;
	}

	/* Massenaktionen mittig wie die beiden Gruppen darueber. Zentriert wird der
	   Inhalt, nicht der Block: "Alle auswaehlen" samt Zaehler und Aktionsmenue
	   wird auf schmalen Geraeten breiter als der Platz, und ein auf Inhaltsbreite
	   geschrumpfter Block stuende dann ueber den Rand hinaus. */
	#survey-actions-bar > #massActions > div {
		justify-content: center;
		flex-wrap: wrap;
	}

	/* Der Knopf behaelt seine Inhaltsbreite und steht mittig - ueber die volle
	   Breite gezogen wirkt er wie eine Flaeche, nicht wie ein Knopf. */
	#survey-actions-bar > #newSurveyButton {
		align-self: center;
	}

	/* Die Massenaktionen ans Ende der Leiste. Sie erscheinen erst mit einer
	   Auswahl, und mitten zwischen "Neue Umfrage" und Filterleiste schoeben sie
	   beim Ein- und Ausblenden alles Darunterliegende auf und ab. */
	#survey-actions-bar > #massActions {
		order: 1;
	}
}

/* Sprungleiste am linken Rand der Umfragenliste: je ein Punkt pro Abschnitt,
   in dessen Statusfarbe. Klebt auf halber Hoehe des Sichtfelds.

   Die Leiste selbst ist 0 hoch und nimmt damit keinen Platz im Fluss - die
   Punkte ragen aus ihr heraus, der negative Rand schiebt sie nach links.
   Auf breiten Viewports steht die Kapsel (28px breit) mittig im 64px breiten
   linken Polster von .container-page: 46px = 32px bis zur Polstermitte plus
   die halbe Kapsel. */
.listing-rail {
	position: sticky;
	top: var(--listing-rail-top, calc((100vh - var(--global-main-header-height, 0px)) / 2 - 40px));
	z-index: 3;

	height: 0;

	margin-left: -46px;
}

/* Ab hier schrumpft das Polster von .container-page auf 24px - fuer eine eigene
   Gasse zu wenig. Die Kapsel rueckt deshalb bis auf die linke Kante der Kacheln
   und ragt zur Haelfte in die Liste hinein (15px = halbe Kapsel), statt Breite
   zu belegen, die auf schmalen Geraeten der Inhalt braucht. Die Punkte sind
   hier etwas breiter (siehe unten): getippt wird mit dem Finger, nicht gezielt
   mit der Maus. */
@media (max-width: 992px) {
	.listing-rail {
		/* Hier ist das obere Polster 60px - siehe Abzug oben. */
		top: var(--listing-rail-top, calc((100vh - var(--global-main-header-height, 0px)) / 2 - 60px));

		margin-left: -15px;
	}
}

.listing-rail__inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: max-content;

	/* Die Gruppe um die Klebemarke herum zentrieren, nicht darunter haengen */
	transform: translateY(-50%);

	/* Weisse Kapsel als Aussparung: auf schmalen Viewports liegen die Punkte
	   zur Haelfte ueber den Kacheln, ohne Hintergrund saessen sie auf deren
	   Grau. */
	padding: 7px;
	border-radius: 999px;
	background-color: var(--ef-color-white, #fff);
}

.listing-rail__dot {
	width: 14px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 999px;

	background-color: var(--ef-color-signal-black-16);
	transition: transform 120ms ease, background-color 120ms ease;
}

/* Angedeutet, solange nichts passiert - beim Ansteuern die volle Statusfarbe.
   Nur in die Breite wachsen: eine laengliche Marke wuerde sonst ihren Abstand
   zu den Nachbarn auffressen. */
.listing-rail__dot:hover,
.listing-rail__dot:focus-visible {
	transform: scaleX(1.2);
}

.listing-rail__dot--preparing:hover,
.listing-rail__dot--preparing:focus-visible {
	background-color: var(--ef-color-signal-black-40);
}

.listing-rail__dot--running {
	background-color: rgba(var(--ef-color-indiablue-rgb), 0.5);
}

.listing-rail__dot--running:hover,
.listing-rail__dot--running:focus-visible {
	background-color: var(--ef-color-indiablue);
}

.listing-rail__dot--completed {
	background-color: rgba(var(--ef-color-raspberry-red-rgb), 0.45);
}

.listing-rail__dot--completed:hover,
.listing-rail__dot--completed:focus-visible {
	background-color: var(--ef-color-raspberry-red);
}

/* Breitere Punkte fuer den Finger. Steht bewusst hinter den Basisregeln:
   gleiche Spezifitaet, es gewinnt die spaetere. */
@media (max-width: 992px) {
	.listing-rail__dot {
		width: 16px;
	}
}

/* Abschnittstitel docken unter der Aktionsleiste an */
.surveyListingHeaders {
	position: sticky;
	top: calc(var(--listing-sticky-top, -40px) + var(--listing-actions-bar-height, 56px));
	z-index: 2;

	/* Das Polster unten gehoert zur weissen Flaeche: geklebt verschwinden die
	   durchlaufenden Karten 16px vor der Schrift statt sie zu beruehren. Im
	   Fluss traegt der Abschnitt aber schon 16px Abstand (gap-16) - beides
	   zusammen waere doppelt so viel. Der negative Rand zieht die Karten
	   wieder heran, sodass der sichtbare Abstand in beiden Zustaenden 16px
	   betraegt. */
	margin: 0 0 -16px;
	padding: 8px 0 16px;
	background-color: var(--ef-color-white, #fff);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Ladezustand beim Neuaufbau der Liste (z.B. andere Anzahl pro Seite). Der
   Aufbau blockiert den Hauptthread - nur opacity- und transform-Animationen
   laufen im Compositor weiter und bleiben deshalb sichtbar. */
@keyframes listingBusyPulse {
	0%, 100% { opacity: .45; }
	50% { opacity: .75; }
}

/* Die Liste wird zweistufig gerendert. Solange Stufe 2 aussteht, pulsiert
   der Listenbereich
   dezent, bis die vollstaendige Seite steht. */
.listing-busy .listing-cards {
	animation: listingBusyPulse 1.1s ease-in-out infinite;
	pointer-events: none;
}

.listing-busy #survey-actions-bar,
.listing-busy .listing-pager {
	cursor: progress;
}

/* Drag & Drop der Teams und Unterordner in der Dashboard-Sidebar */
#sidebar-dashboard-nav {
	/* der aktuell ausgewaehlte Eintrag wird nur ueber die Schriftstaerke markiert */
	/*& li.active > div .description,
	& li.active > a .description {
		font-family: "Lato Bold";
	}*/

	/* Anfasser fuers Sortieren: steht links neben der Anzahl. Der negative Einzug
	   holt genau seine Breite plus den Spaltenabstand der Zeile wieder heraus - er
	   liegt damit im linken Freiraum (Teams 40px, Unterordner 75px Einzug) und
	   Anzahl und Name stehen genauso wie in den Zeilen ohne Anfasser. Ein- und
	   ausgeblendet wird er ueber opacity, damit nichts springt; sichtbar wird er
	   wie die anderen Zeilenaktionen erst beim Hovern - auf Touch wird nicht
	   sortiert. */
	& .sidebar-sort-handle {
		--sidebar-sort-handle-width: 24px;

		opacity: 0;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--sidebar-sort-handle-width);
		align-self: stretch;
		/* 10px ist der gap der Zeile */
		margin-inline-start: calc((var(--sidebar-sort-handle-width) + 10px) * -1);
		color: var(--ef-color-signal-black-40);
		font-size: 24px;
		line-height: 1;
		transition: opacity linear 150ms;
		/* der Finger soll von hier aus ziehen und nicht die Sidebar scrollen */
		touch-action: none;
	}

	/* Die Anfasser der Unterordner stehen in derselben Spalte wie die der Teams.
	   Der negative Einzug oben darf dafuer nicht groesser werden - er hebt genau
	   die eigene Breite auf, ein groesserer Wert zoege Anzahl und Name mit nach
	   links. Verschoben wird deshalb nur der Anfasser selbst, und zwar um den
	   Unterschied der Zeileneinzuege (Unterordner 75px, Teams 40px). Relative
	   Verschiebung statt Layout: die Zeile bleibt davon unberuehrt. */
	& li.sortable-folder .sidebar-sort-handle {
		position: relative;
		inset-inline-start: calc((75px - 40px) * -1);
	}

	@media (pointer: fine) {
		& .sidebar-sort-handle {
			cursor: grab;
		}

		& li.sortable-team > div:hover .sidebar-sort-handle,
		& li.sortable-folder > div:hover .sidebar-sort-handle {
			opacity: 1;
		}

		& li.sortable-team > div:hover .sidebar-sort-handle:hover,
		& li.sortable-folder > div:hover .sidebar-sort-handle:hover {
			color: var(--ef-color-signal-black-100);
		}
	}

	/* am Klon haengt der Anfasser waehrend des Ziehens sichtbar mit, obwohl dessen
	   Zeile selbst nicht gehovert wird */
	& .ui-sortable-helper .sidebar-sort-handle {
		opacity: 1;
		cursor: grabbing;
	}

	/* auf Touch gibt es kein Hovern: dort steht der Anfasser dauerhaft sichtbar,
	   sonst waere nicht zu erkennen, wo der Finger aufsetzen muss. Gescrollt wird
	   weiterhin ueberall sonst in der Zeile - Touch Punch ruft preventDefault()
	   erst, wenn Sortable zusagt, und das tut es nur am Anfasser. */
	@media (pointer: coarse) {
		& .sidebar-sort-handle {
			opacity: 1;
		}
	}

	/* waehrend des Ziehens keine Hover-Hervorhebung unter dem Mauszeiger */
	&.is-sorting {
		& li > div:hover {
			background-color: transparent;
		}
	}

	/* der Klon, der am Mauszeiger haengt */
	& .ui-sortable-helper {
		background: var(--ef-color-white);
		border-radius: 4px;
		box-shadow: 0 8px 20px rgba(var(--ef-color-signal-black-100-rgb), 0.22);
		cursor: grabbing;
		list-style: none;
		opacity: 0.95;
		pointer-events: none;
		z-index: 10;

		& > div:hover {
			background-color: transparent;
		}
	}

	/* das Original bleibt waehrend des Ziehens blass an seinem Platz stehen, damit
	   die Liste nicht springt */
	& li.is-ghost {
		opacity: 0.35;
	}

	/* die Ziel-Ordnerliste waehrend des Ziehens: zeigt, dass ein Ordner sein Team
	   nicht verlassen kann */
	& ul.sortable-folders.is-sort-target {
		background: rgba(var(--ef-color-indiablue-rgb), 0.03);
		box-shadow: inset 2px 0 0 rgba(var(--ef-color-indiablue-rgb), 0.35);
	}

	/* Einfuegemarke: nimmt keine Hoehe ein, zeichnet nur eine Linie zwischen zwei
	   Zeilen - die Liste bleibt dadurch waehrend des Ziehens komplett stehen */
	& .sidebar-sort-indicator {
		display: block;
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		position: relative;
		overflow: visible;
		list-style: none;
		visibility: visible !important;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: -1px;
			height: 2px;
			background: var(--ef-color-indiablue);
			border-radius: 1px;
		}

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: -4px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--ef-color-indiablue);
		}
	}
}

/* Bootstrap Icons laufen mit font-display: block - bis die Schrift da ist, wird
   das Glyph unsichtbar gerendert, und .bi::before hat keine eigene Breite. Jedes
   Icon ist dadurch erst 0px breit und springt dann auf seine echte Breite; bei
   rechtsbuendigen Elementen wie dem User-Dropdown verschiebt das den ganzen Block.
   Eine feste Box haelt den Platz unabhaengig davon frei, ob die Schrift schon
   geladen ist. 1em ist die natuerliche Laufweite der Icons, im geladenen Zustand
   aendert sich also nichts. Muss nach bootstrap-icons.min.css stehen. */
.bi::before,
[class*=" bi-"]::before,
[class^=bi-]::before {
	width: 1em;
	text-align: center;
}