/* ----------------------------------------------------------------
	Canvas: Speaker
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #FD5D3D;
	--cnvs-themecolor-rgb: 253, 93, 61;
	--cnvs-primary-font: 'paralucent-text', sans-serif;
	--cnvs-body-font: 'paralucent', sans-serif;
	--bs-bg-opacity: 1;
}

.btn-primary {
	color: #FD5D3D !important;
	border-color: #FD5D3D !important;
}
#header {
	--cnvs-primary-menu-font-size:	0.875rem;
	--cnvs-primary-menu-submenu-font-size:	0.875rem;
	--cnvs-primary-menu-submenu-font-weight:	500;
	--cnvs-primary-menu-submenu-hover-font-weight: 600;
	--cnvs-primary-menu-submenu-tt:	none;
}

#header {
	--cnvs-primary-menu-hover-color: #111;
}

.is-expanded-menu .menu-link {
	--cnvs-primary-menu-padding-x: 0;
}

.is-expanded-menu .menu-container > .menu-item {
	margin-left: 2.25rem;
	margin-right: 2.25rem;
}

.is-expanded-menu .menu-container>.menu-item:not(.sub-menu)>.menu-link::after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 50%;
	width: 110%;
	margin-left: -55%;
	height: 2px;
	background-color: var(--cnvs-themecolor);
	transform-origin: center center;
	transform: scaleX(0);
	transition: transform .3s cubic-bezier(.645, .045, .355, 1);
}

.is-expanded-menu .menu-container > .menu-item:hover > .menu-link::after,
.is-expanded-menu .menu-container>.menu-item.current>.menu-link::after {
	transform: scaleX(1);
}

/* Custom Form Error Styles */
.form-error-message,
.invalid-feedback,
.text-danger,
ul li.text-danger,
.form-group ul li,
.form-group .list-unstyled li {
    color: red !important;
    font-size: 12px !important;
    list-style-type: none;
    margin-top: 5px;
}

/* Fallback for default Symfony form errors list */
ul.list-unstyled li {
    color: red;
    font-size: 12px;
}

ul.tips-list li {
	color: red;
	font-size: 16px;
}

.red-tip {
	color: red;
}

.is-expanded-menu .sub-menu-container {
	box-shadow: 0px 20px 50px 10px rgba(0, 0, 0, .05);
	border-radius: .25rem;
}

.h-bg-tranparent:hover {
	background: transparent !important;
}

#logo a {
	letter-spacing: -1px;
}

.button[class*=bg-opacity-]:hover {
	--bs-bg-opacity: 1;
	color: #FFF !important;
}

.header-misc-icon a:hover {
	color: var(--cnvs-themecolor);
}

.speaker-gallery img {
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}

.top-search-open .top-search-parent .header-misc> #top-cart {
	opacity: 1;
	color:#FFF
}

.dotted-bg {
	--cnvs-dotted-opacity: .7;
	--cnvs-dotted-top: 0;
	--cnvs-dotted-right: 0;
	--cnvs-dotted-left: auto;
	--cnvs-dotted-size: 190px;
}

.dotted-bg1 {
	--cnvs-dotted-opacity: .5;
	--cnvs-dotted-top: -10px;
	--cnvs-dotted-size: 150px;
}

.dotted-bg.pos-left {
	--cnvs-dotted-right: auto;
	--cnvs-dotted-left: 0;
}

.dotted-bg:before {
	content: "";
	position: absolute;
	display: block;
	top: var(--cnvs-dotted-top);
	left: var(--cnvs-dotted-left);
	right: var(--cnvs-dotted-right);
	width: var(--cnvs-dotted-size);
	height: var(--cnvs-dotted-size);
	background-size: 20px 20px;
	background-position: center;
	transform: translate(30px, -30px);
	background-image: radial-gradient(rgba(var(--cnvs-themecolor-rgb), var(--cnvs-dotted-opacity)) 25%, transparent 25%);
	z-index: auto;
}

.top-account .dropdown-menu {
	border-color: #EEE;
	border-top: 2px solid var(--cnvs-themecolor);
	box-shadow: 0px 20px 50px 10px rgba(0, 0, 0, .05);
}

.top-cart-open a,
.top-account a.show {
	color: var(--cnvs-themecolor);
}

.sub-menu-container .menu-item>.menu-link,
.sub-menu-container .menu-item:hover>.menu-link {
	background-color: transparent;
	font-family: var(--cnvs-primary-font) !important;
}

.noice-effect::before {
	content: "";
	position: absolute;
	top: -100%;
	left: -100%;
	width: 300%;
	height: 300%;
	opacity: 0.6;
	background-repeat: repeat;
	background-size: auto;
	animation: noiceAnim 8s steps(10) infinite;
}

@keyframes noiceAnim {

	0%,
	to {
		transform: translate(0);
	}

	10% {
		transform: translate(-5%, -10%);
	}

	20% {
		transform: translate(-15%, 5%);
	}

	30% {
		transform: translate(7%, -25%);
	}

	40% {
		transform: translate(-5%, 25%);
	}

	50% {
		transform: translate(-15%, 10%);
	}

	60% {
		transform: translate(15%);
	}

	70% {
		transform: translateY(15%);
	}

	80% {
		transform: translate(3%, 35%);
	}

	90% {
		transform: translate(-10%, 10%);
	}
}

.entry .read-more i {
	font-size: 85%;
}

.entry:hover .read-more i {
	transform: translateX(4px);
}

.modal-open {
	overflow: inherit !important;
}

.modal-backdrop.show {
	display: none;
}

#gotoTop {
	--cnvs-gotoTop-stroke-color: var(--cnvs-themecolor);
	--cnvs-gotoTop-stroke-size: 32px;
	--cnvs-gotoTop-stroke-width: 4px;
	--cnvs-scroll-progress-range: calc((var(--cnvs-body-height) - var(--cnvs-viewport-height)) / var(--cnvs-body-height));
	--cnvs-gotoTop-scroll: calc(260 - (260 * (var(--cnvs-scroll-end) / var(--cnvs-scroll-progress-range))));
	background-color: transparent !important;
}

#gotoTop::before {
	content: "\f148";
	font-family: 'bootstrap-icons';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: 2px;
	width: calc(var(--cnvs-gotoTop-stroke-size) + calc(var(--cnvs-gotoTop-stroke-width) * .5));
	height: calc(var(--cnvs-gotoTop-stroke-size) + calc(var(--cnvs-gotoTop-stroke-width) * .5));
	line-height: calc(var(--cnvs-gotoTop-stroke-size) - 1px);
	font-size: 1rem;
	color: var(--cnvs-contrast-900);
	transform: translate(-50%, -50%);
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 50%;
	z-index: -1;
}

#gotoTop circle {
	stroke: var(--cnvs-gotoTop-stroke-color);
	stroke-width: var(--cnvs-gotoTop-stroke-width);
	transform: rotate(-90deg);
	transform-origin: center;
	stroke-dashoffset: var(--cnvs-gotoTop-scroll);
	stroke-dasharray: 255 255;
	z-index: 1;
}

.btn-close {
	font-size: .75rem;
}

.widget_nav_menu li a,
.widget_links li a,
.widget_meta li a,
.widget_archive li a,
.widget_recent_entries li a,
.widget_categories li a,
.widget_pages li a,
.widget_rss li a,
.widget_recent_comments li a {
	font-family: var(--cnvs-primary-font);
}


@-webkit-keyframes ripple {
	from {
		opacity: 1;
		transform: scale3d(0.75, 0.75, 1);
	}

	to {
		opacity: 0;
		transform: scale3d(1.5, 1.5, 1);
	}
}

@keyframes ripple {
	from {
		opacity: 1;
		transform: scale3d(0.75, 0.75, 1);
	}

	to {
		opacity: 0;
		transform: scale3d(1.5, 1.5, 1);
	}
}



/* Upper 992px Devices */
@media (min-width: 992px) {

	.text-stretch {
		position: relative;
		width: calc(100% + 200px);
		z-index: 1;
	}
}


.card
{
    border-radius: 25px;
}

.card img {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}


.card-title, .card-text
{
    margin-left: 0.5rem;
}

.card-title {
    padding-top: 1.0rem;
    margin-bottom: 0;
    font-weight:bold;
    color:#2b2b2b;
}

.circle-wave {
	---circle-wave-size: calc(65px + 1vw);
	---circle-wave-font-size: calc(.75rem + 2vw);
	---circle-wave-ripple-size: 10px;
	height: var(---circle-wave-size);
	width: var(---circle-wave-size);
	border-radius: 100%;
	padding: 0;
	margin-top: 4%;
	border: none;
}

.circle-wave-inactive {
    ---circle-wave-size: calc(65px + 1vw);
    ---circle-wave-font-size: calc(.75rem + 2vw);
    height: var(---circle-wave-size);
    width: var(---circle-wave-size);
    border-radius: 100%;
    margin-top: 4%;
    padding: 0;
    border: none;
}

.circle-wave-inactive i {
    position: relative;
    font-size: var(---circle-wave-font-size);
    background: var(--cnvs-themecolor);
    color: #FFF;
    text-align: center;
    height: var(---circle-wave-size);
    width: var(---circle-wave-size);
    line-height: var(---circle-wave-size);
    border-radius: 100%;
    z-index: 1;
}

.circle-wave i {
	position: relative;
	font-size: var(---circle-wave-font-size);
	background: var(--cnvs-themecolor);
	color: #FFF;
	text-align: center;
	height: var(---circle-wave-size);
	width: var(---circle-wave-size);
	line-height: var(---circle-wave-size);
	border-radius: 100%;
	z-index: 1;
}

.circle-wave:before,
.circle-wave:after {
    content: "";
    opacity: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
    border: var(---circle-wave-ripple-size) solid rgba(var(--cnvs-themecolor-rgb), 0.75);
    border-radius: 100%;
    -webkit-animation-name: ripple;
    animation-name: ripple;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.05, 0, 0.34, 1);
    animation-timing-function: cubic-bezier(0.05, 0, 0.34, 1);
    z-index: auto;
}

.circle-wave::before {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.recording-controls {
    z-index: 10;
}


#mh80 {
	min-height: 80vh;
}

.no-pdt {
	padding-top: 0 !important
}

.list-style-type {
	list-style-type: none;
}
.pd40 {
	padding: 40px;
}

.plus-sign {
	display: inline;
	white-space: nowrap;
}

@media (min-width: 768px) {

	.circle-wave {
		---circle-wave-size: calc(50px + 1vw);
	}
}

/* Upper 992px Devices */
@media (min-width: 992px) {

	.circle-wave {
		---circle-wave-size: calc(65px + 1vw);
	}
}/* Dashboard Catalog Styles */
.section-progress-container {
    height: 6px;
    width: 100px;
    background-color: #e9ecef;
}

.question-audio-player {
    height: 32px;
}

.carousel-control-custom i {
    font-size: 2rem;
}
.unlock-cta-icon {
    font-size: 3rem;
    color: var(--cnvs-themecolor);
}
.unlock-cta-text {
    max-width: 600px;
    margin: 0 auto;
}
.unlock-cta-button {
    font-size: 1.1rem;
}
.section-progress-bar {
    transition: width 0.6s ease, background-color 0.3s ease;
}
.section-progress-bar.bg-success {
    background-color: #198754 !important;
}
.section-progress-bar.bg-secondary {
    background-color: #6c757d !important;
}
audio {
    max-width: 100%;
}
.recording-existing {
    padding: 4rem;
}

.question-card-body {
    padding: 1rem;
    min-height: 450px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.carousel-inner {
    position: relative;
    width: 100%;
}

.carousel-control-custom {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;

    border-radius: 10px;
    width: 60px;
    display: flex;
    align-items: flex-start; /* Ändern von center auf flex-start */
    justify-content: center;
    z-index: 5;
    padding-top: 200px; /* Icons auf eine feste Höhe von oben setzen */
}

/* Spezifische Korrektur für Mobile, falls die Card durch mb-4 etc. verschoben ist */
@media (max-width: 767.98px) {
    .carousel-control-custom {
        height: 450px; /* Hier erzwingen wir die min-height der Card */
        padding-top: 200px; /* Gleiche Höhe auch auf Mobile */
    }
}

.carousel-control-prev.carousel-control-custom {
    left: 0;
}

.carousel-control-next.carousel-control-custom {
    right: 0;
}

.carousel {
    position: relative;
    width: 100%;
}

.question-slide {
    width: 100%;
}

.question-slide > .d-flex {
    width: 100%;
}

.section-questions-progress {
    height: 2px;
}

.q-progress-item {
    min-width: 20px;
    background-color: #e9ecef;
    cursor: pointer;
    height: 4px;
}

.q-progress-item .progress-bar {
    width: 100%;
    height: 4px;
}

.q-progress-item .progress-bar.active-slide {
    opacity: 1;
}

.q-progress-item .progress-bar.inactive-slide {
    opacity: 0.4;
}
.recording-help {
    color: #a0a0a0;
    font-size: 0.85rem;
    margin-top: 100px; /* Platz unter dem absoluten Mikrofon-Button schaffen */
    display: block;
    width: 100%;
    text-align: center;
}

.recording-time {
    color: #a0a0a0;
    font-size: 0.85rem;
    margin-top: 100px; /* Platz unter dem absoluten Mikrofon-Button schaffen */
    display: block;
    width: 100%;
    text-align: center;
}

.color-play-button {
    color: #FFFFFF;
}

.color-play-button:active {
    border: none !important;
    background-color: transparent !important;
}

.section-percentage-label {
    color: #a0a0a0;
}

.pl-1 {
    padding-left: 1rem;
}

.pl-0125 {
	padding-left: 1rem;
}

@media (max-width: 576px) {
    .section-questions-progress {
        gap: 2px !important;
    }
    .q-progress-item {
        height: 4px !important;
        min-width: 0;
    }
    .section-header h4 {
        font-size: 1.1rem;
    }
}


.ssl-badge {
    position: fixed;
    right: 1rem;
    top: 80%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    pointer-events: none;
    z-index: 100;
    min-width: 160px;
}

.ssl-badge__icon {
    width: 36px;
    height: 36px;
    background: #1a7a4a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ssl-badge__icon i {
    font-size: 1.1rem;
    color: #fff;
}

.ssl-badge__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ssl-badge__title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.02em;
    line-height: 1;
}

.ssl-badge__sub {
    font-size: 0.7rem;
    color: #666;
    line-height: 1;
}

.play-recording-btn {
	width: 40px;
	height: 40px;
	background-color: #FD5D3D !important;
	color: #fff !important;
	border: none;
	padding: 0;
}

.play-recording-btn i,
.play-recording-btn .bi-play {
	color: #fff !important;
	background-color: #FD5D3D !important;
	margin-left: 3px;
    margin-top: 1px;
}

#audioPlayerModal .bi-mic-fill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background-color: #FD5D3D !important;
	color: #fff !important;
	border-radius: 50%;
}


.nav-link:hover {
	color: #FD5D3D  !important;
}

.clickable-recording {
	margin-right: -5px !important;
	margin-left: -5px !important;
}

@media (max-width: 500px) {
	.clickable-recording {
		margin-right: -15px !important;
		margin-left: -15px !important;
	}
}
/* Utility classes replacing inline styles */
.fs-2rem { font-size: 2rem; }
.text-uppercase-input { text-transform: uppercase; }
.text-nowrap-btn { white-space: nowrap; }
.hidden-initially { display: none; }
.btn-disabled-state { opacity: .5; cursor: not-allowed; pointer-events: none; }
.section-no-padding-bottom { padding-bottom: 0 !important; }
.card-narrow { max-width: 400px; }
.card-medium { max-width: 600px; }
.card-wide { max-width: 800px; }
.card-auth-body { padding: 40px; max-width: 450px; }
.chart-container { height: 400px; width: 100%; }
.profile-picture-preview { max-height: 250px; max-width: 100%; object-fit: cover; }
.cursor-pointer { cursor: pointer; }
.color-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid #ccc; vertical-align: middle; }
.cart-product-img { object-fit: cover; border-radius: 4px; }
.hero-img-rounded { border-radius: 1rem; }
.counter-suffix { display: inline; white-space: nowrap; }
.fs-16 { font-size: 16px; }