@font-face {
    font-family: 'Work Sans';
    src: url('../Fonts/work-sans-v19-latin-regular.woff2') format('woff2'),
         url('../Fonts/work-sans-v19-latin-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../Fonts/OpenSansRegular.woff2') format('woff2'),
         url('../Fonts/OpenSansRegular.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansSemiBold';
    src: url('../Fonts/opensanssemibold.woff2') format('woff2'),
         url('../Fonts/opensanssemibold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
* {
	margin: 0px;
	padding: 0px;
}
:root {
	--main-color-fonts: #4D5256;
	--main-color-red: #E24639;
	--main-color-white: #FFFFFF;
	--main-color-light-grey: #EAEAE8;
	--main-color-dark-grey: #707070;
	--main-color-light-blue: #DBEAED;
	--accent-color-light-grey: #0000001F;
	--main-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	--headline-font-family: 'Work Sans', Arial, Helvetica, sans-serif;
	--StdBack: #fafafa;
	--Citrus: #E6FF83;
	--Ocean: #CFE8FF;
	--Sorbet: #FFC0A6;
	--Citrus2: #B2D22F;
	--Citrus3: #CCFF00;
	--Sorbet2: #ff9265;
	--Sorbet3:	#ae8685;
	--Ocean2: #21CBDE;
	--Ocean3: #c27e86; 
	--HazyWhite2: #C9D9D9;
	--HazyWhite3: #8DAEAE;
	--DeepTeal3: #6D8188;
	--secondary-white :#b0e4e6;
	--Black: #000000;
	--BlackGreen: #0d2a2b;
}
section {
	background: white;
	padding: 2rem;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	margin-bottom: 2rem;
  }
html, body {
	
	margin:0px;
	padding: 0px;
	width: 100%;
	height: 100%; 
	color:#7c7673;
	line-height:20px;
	font-size:13px;
	font-family: 'OpenSansRegular';
	background:#f0f0f0;
	text-align:left;
	min-height: 100%;
    height: auto !important;
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%231fb7be' fill-opacity='0.1' d='M0,160C80,120,160,80,240,100C320,120,400,180,480,200C560,220,640,200,720,160C800,120,880,80,960,100C1040,120,1120,180,1200,200C1280,220,1360,200,1440,160L1440,320C1360,280,1280,240,1200,260C1120,280,1040,320,960,320C880,320,800,280,720,260C640,240,560,280,480,320C400,320,320,280,240,260C160,240,80,280,0,320Z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 450px;
	background-position: center 150px;;
}
.Main
{
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
.durchgestrichen-rot {
	color: red;
	text-decoration: line-through;
  }
.container-Main
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}
.BackHazyWhite
{
	background-color: #66d2d6;
	color: #242424;
}
.DLeft 
{
	flex: 65%; /* Linke Spalte nimmt 70% */
}
.DRight
{
	flex: 20%; /* Linke Spalte nimmt 70% */
}

.price-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}


.icon-euro {
    flex-shrink: 0;
}

.price-label {
    font-size: 1.2rem;
    color: #1fb7be;
    margin: 0;
}
  .card {
	flex: 1 1 300px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 20px;
}
.check-list {
    list-style: none;
    padding-left: 0;
}


.card h2 {
	margin-top: 0;
	color: #555;
}

.stat {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.stat:last-child {
	border-bottom: none;
}

.stat-title {
	font-weight: bold;
}

.highlight {
	color: #0db1b9;
}

.sliderN {
	width: 100vw;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	padding: 30px 0;
  }
  .slide-trackN {
	display: flex;
	width: calc(250px * 10 * 2); /* 10 Slides, 2x wegen Duplizierung */
	animation: scroll 50s linear infinite;
  }
  .slideN {
	width: 200px;
	height: 150px;
	margin: 0 16px;

	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.07);
	flex-shrink: 0;
  }

  @keyframes scroll {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(calc(-250px * 10 - 16px * 20));
	}
  }
  .responsive-image {
    transform: rotate(13deg);
    margin-top: -20px;
    max-width: 100%;
    height: auto;
  }

  @media (max-width: 600px) {
    .responsive-image {
      width: 50%; /* oder kleiner, z. B. 40% */
      float: none; /* optional, um zentriert statt rechts zu platzieren */
      display: block;
      margin: 0 auto;
    }
  }
  /* Responsive Anpassung */
  @media (max-width: 800px) {
	.slideN {
	  width: 180px;
	  height: 110px;
	  font-size: 1rem;
	}
	.slide-trackN {
	  width: calc(180px * 10 * 2);
	  animation: scroll 40s linear infinite;
	}
	@keyframes scroll {
	  0% {
		transform: translateX(0);
	  }
	  100% {
		transform: translateX(calc(-180px * 10 - 16px * 20));
	  }
	}
  }
  @media (max-width: 500px) {
	.slideN {
	  width: 120px;
	  height: 80px;
	  font-size: 0.9rem;
	}
	.slide-trackN {
	  width: calc(120px * 10 * 2);
	  animation: scroll 40s linear infinite;
	}
	@keyframes scroll {
	  0% {
		transform: translateX(0);
	  }
	  100% {
		transform: translateX(calc(-120px * 10 - 16px * 20));
	  }
	}
  }

.slider-container {
	width: 100%;
	max-width: 300px;
	height: 200px;
	position: relative;
	overflow: hidden;
	margin-top: 2rem;
}
.InfoResult
{
	display:none;
	padding:12px;
	color: var(--HazyWhite2);
	border:0px solid #b4ba55;
	position:fixed;
	background: rgba(0, 0, 0, 0.8); /* Muss transparent sein */
	-webkit-transition: left .5s ease-in;
	-moz-transition: left .5s ease-in;
	-o-transition: left .5s ease-in;
	-ms-transition: left .5s ease-in;
	transition: 0.5s;

	border-radius: 14px; 
	z-index: 99999;
	width: 100%;
	max-width: 900px;
	pointer-events: auto;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	max-height: 90vh;       /* Maximale Höhe auf 90% der Viewport-Höhe */
	overflow: auto;         /* Scrollbar anzeigen, wenn nötig */

}
@media (max-width: 500px) {
	.InfoResult
	{
		border-radius: 0px;
		width: 95%;
		margin-left: 0px;
	}
}
.toast {
    animation: slideUp 0.5s ease-in-out;
}
.toast-header
{
	background-color: #fad344;
	border: 1px solid #fad344;
}
.toast-body
{
	background-color: #fdf0bf;
	color: #000000;
	border: 1px solid #fad344;
}
.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.slide h2 {
	color: #0db1b9;
	margin-bottom: 1rem;
}

@keyframes slideShow {
	0%, 25% { opacity: 1; }
	33%, 58% { opacity: 0; }
	66%, 100% { opacity: 0; }
}
.navbar-toggler {
	font-size: 1.8rem;         /* größerer Button */
	padding: 0.75rem 1rem;     /* optional größerer Klickbereich */
	margin-top: -10px;         /* nach oben verschieben */
  }
  
  /* Optional: Symbol vergrößern */
  .navbar-toggler-icon {
	width: 2rem;
	height: 2rem;
  }

  .headersubpage {
	background-image: url('../images/swisssoftware.jpg');
	background-size: cover;
	background-position: center 30%; /* verschiebt das Bild leicht nach unten */
	height: 45vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-shadow: 0 2px 6px rgba(0,0,0,0.6);
	animation: fadeIn 2s ease-in;
	width:100%;
  }
  .headersubpage2 {
	background-image: url('../images/moytradeinfo.jpg');
	background-size: cover;
	background-position: center 30%; /* verschiebt das Bild leicht nach unten */
	height: 45vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-shadow: 0 2px 6px rgba(0,0,0,0.6);
	animation: fadeIn 2s ease-in;
	width:100%;
  }
  .containersubpagehead {
	max-width: 1000px;
	margin: 2rem auto;
	padding: 0 1rem;
	width:100%;
  }
  .containersubpagehead h1 {
	font-size: 3.8rem;
	text-align: right;
	font-family: 'Work Sans';
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0,0,0,0.8);
	animation: fadeIn 2s ease-in;
  }
  .containersubpage {
	max-width: 1000px;
	margin: 2rem auto;
	padding: 0 1rem;
  }

  .contentsubpage {
	display: flex;
	flex-direction: column;
	gap: 4rem;
  }
  .blocksubpage {
	background: white;
	padding: 1.5rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	animation: slideUp 1s ease-out;
  }
  .blocksubpage img {
	width: 100%;
	border-radius: 6px;
	margin-top: 1.5rem;
	transition: transform 0.3s ease;
  }
  .blocksubpage img:hover {
	transform: scale(1.05);
  }
  .bannersubpage {
	width: 100%;
	height: auto;
	margin: 2rem 0;
	border-radius: 8px;
	animation: fadeIn 2s ease-in;
  }
  @keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
  }
  @keyframes slideUp {
	0% { transform: translateY(30px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
  }
.slide:nth-child(1) { animation: slideShow 15s infinite; }
.slide:nth-child(2) { animation: slideShow 15s infinite 5s; }
.slide:nth-child(3) { animation: slideShow 15s infinite 10s; }
h1 {
	color: #0db1b9;
	text-align: left;
}
h2 {
	color: #0db1b9;
	text-align: left;
}
.H1Login
{
	font-size: 26px;
	font-size: clamp(1.9rem, 4vw, 2.5rem);
}
.H2Login
{
	font-size: clamp(1.5rem, 4vw, 2.0rem);
	text-align: center;
}
@media (max-width: 768px) {
	.H1Login {
		max-width: 270px;
		text-align: left;
	}
	.H2Login {
		max-width: 270px;
		text-align: left;
	}
}
input {
	width: 100%;
	padding: 0.5rem;
	margin: 0.5rem 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
button {
	width: 100%;
	padding: 0.5rem;
	background-color: #0db1b9;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 1rem;
}
button:hover {
	background-color: #0a8f96;
}
.info-containerHead {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;  /* ab 791px zentrieren */
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto;
	overflow: visible;
	position: relative;
	gap: 20px;
  }
  
  .login-container {
	flex: 1 1 33%;
	box-sizing: border-box;
	min-width: 200px;
	background-color: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .StartClaim {
	
	z-index: 2;
	background-image: url("../images/MOY_Post_273.png");
	background-size: cover;

  }
  .StartMobile{
	display:none;
}

  @media (max-width: 790px) {
	.info-containerHead {
	  flex-direction: column;
	  align-items: center; /* zentriert Boxen untereinander */
	  text-align: center;
	  justify-content: center;  /* ab 791px zentrieren */
	}
  
	.login-container{
		width: 90%;     /* responsive Breite */
		max-width: 500px;
	  height: 200px;
	  }
	.StartClaim {
		display:none;
	}
	.StartMobile{
		display:block;
	}
	.StartMobile img {
	  margin-left: 0;
	  width: 100%;
	  max-width: 100%;
	}
  }
.info-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Zentriert die Kacheln horizontal */
	align-items: center; /* Zentriert die Kacheln vertikal */
	gap: 2.3rem; /* Abstand zwischen den Kacheln */
	margin-top: 2rem;
	width: 100%;
	max-width: 1200px;
}
.info-containerFade {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Zentriert die Kacheln horizontal */
	align-items: center; /* Zentriert die Kacheln vertikal */
	gap: 2.3rem; /* Abstand zwischen den Kacheln */
	margin-top: 2rem;
	width: 100%;
	max-width: 1200px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
@media (max-width: 768px) {
	.info-containerFade {
	opacity: 1;
	transform: translateY(0);
	}
}
.info-containerFade.visible {
	opacity: 1;
	transform: translateY(0);
  }
.info-containerFadeNews {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Zentriert die Kacheln horizontal */
	align-items: center; /* Zentriert die Kacheln vertikal */
	gap: 2.3rem; /* Abstand zwischen den Kacheln */
	margin-top: 2rem;
	width: 100%;
	max-width: 1200px;
	opacity: 1;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
@media (max-width: 768px) {
	.info-containerFadeNews {
	opacity: 1;
	transform: translateY(0);
	}
}
.info-containerFadeNews.visible {
	opacity: 1;
	transform: translateY(0);
  }

.info-containerFull {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Zentriert die Kacheln horizontal */
	align-items: center; /* Zentriert die Kacheln vertikal */
	gap: 2.3rem; /* Abstand zwischen den Kacheln */
	margin-top: 2rem;
	width: 100%;
}
.InsideFull
{
	width: 100%;
	max-width: 1100px;
	padding:15px;
}
.InsideFull h3
{
	margin-bottom: 30px;
}
.info-box {
	background-color: white;
	color: #333;
	padding: 0rem;
	border-radius: 8px;
	width: 100%;
	max-width: 350px; /* Maximale Breite der Kachel */
	text-align: left; /* Text zentriert */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animation für Hover-Effekt */
	border-top: 4px solid #0db1b9; /* Farbakzent oben */
	cursor:pointer;
}
.info-box:hover {
	transform: translateY(-5px); /* Leichtes Heben beim Hover */
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15); /* Stärkerer Schatten beim Hover */
}
.info-box h3 {
	margin-top: 0; /* Kein Abstand nach oben */
	color: #0db1b9; /* Überschrift in Akzentfarbe */
}
.info-box img {
	width: 100%; /* Bild passt sich der Breite der Kachel an */
	height: auto; /* Höhe wird proportional angepasst */
	border-top-left-radius: 8px; /* Entferne obere Ränder */
	border-top-right-radius: 8px; /* Entferne obere Ränder */
}
.testimonial-banner {
	width: 100%;
	margin: 40px auto;
	padding: 60px 20px;
	border-radius: 12px;
	position: relative;
	text-align: center;
	font-family: 'Work Sans';
  }
  
  .testimonial-wrapper {
	position: relative;
	height: 110px; /* feste Höhe, damit nix springt */

  }
  
  .testimonial-item {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	padding: 0 20px;
  }
  
  .item-1 { animation: show 20s infinite 0s; }
  .item-2 { animation: show 20s infinite 5s; }
  .item-3 { animation: show 20s infinite 10s; }
  .item-4 { animation: show 20s infinite 15s; }
  
  @keyframes show {
	0%, 20% { opacity: 1; z-index: 1; }
	25%, 100% { opacity: 0; z-index: 0; }
  }
  
  .testimonial-item p {
	font-size: 2.3rem;
	margin-bottom: 10px;
	line-height: 45px;
	color: var(--Ocean2);
  }
 @media (max-width: 768px) {
  .testimonial-item p {
	font-size: 1.5rem;
	margin-bottom: 10px;
	line-height: 25px;
	color: var(--Ocean2);
  }
}
  .testimonial-item strong {
	font-size: 1rem;
	color: #006064;
  }
  
  .testimonial-item span {
	font-size: 0.9rem;
	color: #555;
  }
@media (min-width: 768px) {
	.info-container {
		justify-content: center; /* Auch auf größeren Bildschirmen zentriert */
		gap: 2rem; /* Abstand bleibt gleich */
		flex-wrap: wrap; /* Kacheln umbrechen bei Bedarf */
		max-width: calc(3 * (300px + 2rem)); /* Maximalbreite für drei Kacheln */
		margin-left:auto;margin-right:auto
}
}
.faq-container {
	max-width: 700px;
	margin: 40px auto;
	background: #fff;
	padding: 30px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.faq-item {
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}
.faq-question {
	font-weight: bold;
	color: #4c8788;
	cursor: pointer;
	padding: 12px 0;
	transition: color 0.2s;
	font-size: 18px;
}
.faq-question:hover {
	color: #2d595a;
}
.faq-answer {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s;
	color: #444;
	padding: 0 0;
}
.faq-item.active .faq-answer {
	opacity: 1;
	max-height: 400px; /* ausreichend für längere Antworten */
	padding: 10px 0;
}
/* Responsives Design */
@media (max-width: 600px) {
	.faq-container {
		padding: 18px 4vw;
	}
	h1 {
		font-size: 1.4em;
	}
}
.BackBlue
{
	background: var(--main-color-light-blue);
}
.BorderBottom
{
	border-bottom: 1px solid #b6d4fe;
}
h1, .h1 {
	font-size: 2rem;
  }
  
  h2, .h2 {
	font-size: 1.7rem;
  }
a 
{
	color: #3e68b4;
	text-decoration: dotted;
}
a:hover
{
	color:#8a0e19;
}
.TopNav:hover{
	color: #88b4b5;
}
.FlexFrame
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width:100%;
    flex-flow: wrap;  
	gap:35px;
}
.FlexFrameRow
{
	display: flex;
	flex-wrap: wrap; /* Damit die Spalten auf kleineren Bildschirmen umbrechen */
	gap: 20px; /* Abstand zwischen den Spalten */
	padding: 20px;
}
.FlexBoxRow
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.FlexBoxColumn
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.FlexBoxColumnTop
{
	display: flex;
	flex-direction: column;
}
.FlexRow
{
	display: flex;
	flex-direction: row;
}
.FlexArticle
{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height:fit-content;
    flex-direction: row;
}
.SpaceAround
{

	justify-content: space-between;
}
.SpaceAround2
{

	justify-content: space-around;
}
.FlexColumn
{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: left;
}
.JustifyItemsLeft
{
    justify-items: left;
    justify-content: left;
}
.JustifyItemsCenter
{
    justify-content: center;
}
.JustifyContentFlexStart
{
	justify-content: flex-start;
}
.TextVerticalTop
{
    align-items: initial;
}
.AlignItemsTop
{
	align-items: flex-start;
}
.AlignItemsCenter
{
	align-items: center;
}
.JustifyItemsLeft
{
	justify-items: left;
	justify-content: left;
}
.JustifyItemsRight
{
	justify-items: right;
	justify-content: right;
}
.JustifyItemsCenter
{
	justify-content: center;
}
.JustifyItemsCenter-I
{
	justify-items: center;
}
.JustifyContentEnd
{
	justify-content: flex-end;
}
.JustifyContentSpaceBetween
{
	justify-content: space-between;
}
.JustifyContentSpaceAround
{
	justify-content: space-around;
}
.FlexBoxRowSpaceBetweenItems
{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: space-around;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
}
.AlignItemsStretch
{
	align-items: stretch;
}
.Gap15
{
	gap:15px;
}
.Gap25
{
	gap:25px;
}
.bgemggray
{
	background: #1fb7be;
}
.bgemgyellow
{
	background: #1fb7be;
}
.nav-item-canvas
{
	width:100%;
	font-size: 22px;
	padding: 10px;
}
.FooterLeiste
{
	width: 100%;
	clear:both;
	height:20px; 
	margin-top:20px;
	margin-bottom: -5px;
}
#Footer
{
	width:100%;
	height:200px;
	margin-bottom:-10px;
	padding:0px;
}
.dashbox
{
	text-align:center;
	color:#ffffff;
	float:left;
	width:230px;
	font-size:14pt;
	cursor:pointer;
	height:65px;
	padding:7px;
	line-height: 26px;
	opacity: 1;
	transition: 0.3s;
	border-radius: 10px 10px 10px 10px;
	background: #1fb7be;
}
.ArticleOverView
{
    font-family: 'Arial';
    border-radius: 25px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 23px;
    margin-top:10px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    margin-right: 10px;
    margin: 10px;
    cursor:pointer;
    border: 1px solid var(--secondary-black);
    background: var(--secondary-white);
    color: var(--secondary-black);
    border-right:15px solid var(--secondary-black);
    height:fit-content;
}
.ArticleOverView:hover
{
	opacity: 1;
	transition: 0.3s;
    background: var(--DeepTeal3);
    color: var(--secondary-white);
    border-right:15px solid var(--Ocean2);

}
.ShowArticle
{
    background: var(--secondary-white);
    color: var(--Black);
	opacity: 0.8;
	transition: 0.3s;
    border-radius: 25px;
    padding: 30px;
	width: 100%;
	max-width: 700px;
}
.Circle 
{
	width: 20px;
	height: 20px;
	color: #ffffff;
	background-color:#8a0e19;
	border-radius: 9px 9px 9px 9px;
	position: absolute;
	margin-left:17px;
	margin-top:-18px;
}
.BackGreen
{
	background:#b4ba55;
	color:#cccccc;
}
.BackGrey
{
	background:#a7a7a7;
	color:#cccccc;
}
.BackGreyLight
{
	background:#a7a7a7;
	color:#e6e4e4;
}
.BackWhite
{
	background:#ffffff;
}
.dashbox:hover
{
	background: #356364;;
	transition: 0.3s;
}
.black_overlay
 {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 110%;
	height: 380%;
	background-color: black;
	z-index:3001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
 }
     #overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      z-index: 999;
    }

    #overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }
 .inline_head
{
 float:left;
 width:380px;
 text-align:left;
 padding:3px;
 cursor:pointer;
}
.inline_head:hover
{
 background:#d6e2e8;
}
.BlogCatLeft
{
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-top:1px solid var(--secondary-black);
	height:120px;
}
.HoverScale
{
	transition: transform 0.3s ease, filter 0.3s ease; /* Übergangseffekt für Zoom und Filter */
}
.HoverScale:hover
{
	/*filter: brightness(50%); /* Dunklerer Effekt */
	transform: scale(1.1); /* Vergrößert das div bei Hover */
}
.BlogCatRight
{
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom:1px solid var(--secondary-black);
	padding: 15px;
	background-color: var(--secondary-black);
	color: var(--BlackGreen);
}
.switch {
	display: inline-block;
	height: 32px;
	position: relative;
	width: 60px;
  }
  
  .switch input {
	display:none;
  }
  
  .slider {
	background-color: #ccc;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
  }
  
  .slider:before {
	background-color: #fff;
	bottom: 4px;
	content: "";
	height: 24px;
	left: 4px;
	position: absolute;
	transition: .4s;
	width: 24px;
  }
  input:checked + .slider {
	background-color: #66bb6a;
  }
  
  input:checked + .slider:before {
	transform: translateX(24px);
  }
  
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }
#zuord
{
	top:50%;
	left:50%;
	z-index:3200;
	min-width:1160px;
	height:630px;
	display:none;
	margin-top:-290px;
	margin-left:-600px;
	position:fixed;
	text-align:center;
	overflow:auto;
	overflow-y: scroll;
	overflow-x: hidden;
}
 #update { 

	} 
	.spinner-container1 {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.spinnerCont {
		width: 50px;
		height: 50px;
		border: 5px solid rgba(31, 183, 190, 0.3); /* Halbtransparenter Rand */
		border-top-color: #1fb7be; /* Hauptfarbe */
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	/* Animation */
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	/* Zentriert den Spinner */
	.spinner-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.spinner-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	  }
	  
	  .spinner {
		width: 100px;
		height: 100px;
		animation: rotate 2s linear infinite;
	  }
	  
	  @keyframes rotate {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	  }
	.loader,
	.loader:before,
	.loader:after {
	  background: #ffffff;
	  -webkit-animation: load1 1s infinite ease-in-out;
	  animation: load1 1s infinite ease-in-out;
	  width: 1em;
	  height: 4em;
	}
	.loader {
	  color: #356364;
	  text-indent: -9999em;
	  margin: 88px auto;
	  position: relative;
	  font-size: 11px;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	}
	.loader:before,
	.loader:after {
	  position: absolute;
	  top: 0;
	  content: '';
	}
	.loader:before {
	  left: -1.5em;
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}
	.loader:after {
	  left: 1.5em;
	}
	@-webkit-keyframes load1 {
	  0%,
	  80%,
	  100% {
		box-shadow: 0 0;
		height: 4em;
	  }
	  40% {
		box-shadow: 0 -2em;
		height: 5em;
	  }
	}
	@keyframes load1 {
	  0%,
	  80%,
	  100% {
		box-shadow: 0 0;
		height: 4em;
	  }
	  40% {
		box-shadow: 0 -2em;
		height: 5em;
	  }
	}
.FontColorWhite
{
	color: #ffffff;
}
.FontColorYellowDark
{
	color: #7e6702;
}
.FontColorDark
{
	color: #383838;
}
.FontColorRed
{
	color: #dd2c2c;
}
.FontWeightBold
{
	font-weight: bold;
}
.SmallFont
{
	font-size: 10px;
}
.CalLabelCell
{
	margin-bottom: 0;
	border-radius: 0.25rem;
	color:#414040;
	font-size: 10px;
	padding:1px;
	padding-left: 3px;
	overflow: hidden;
	margin-top:1px;
}
.CalLabelCellCanvas
{
	margin-bottom: 0;
	border-radius: 0.25rem;
	color:#414040;
	font-size: 14px;
	padding:1px;
	padding-left: 3px;
	overflow: hidden;
	margin-top:1px;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
.line
{
	width:100%;
	background:#f1f1f1;
	height:40px;
	margin-top:3px;
	padding:7px;
	font-size:18px;
  	transition: 0.5s;
}
.line:hover
{
	background:#cccccc;
	cursor:pointer;
	transition:opacity 2s linear;
	opacity: 1;
}
.LineJournal
{
	width:100%;
	height: 25px;
	background:#ffffff;
  	transition: 0.5s;
	margin-top:2px;
}
.LineJournal:hover
{
	background:#cccccc;
	cursor:pointer;
	transition:opacity 2s linear;
	opacity: 1;
}
.main_inline_doks
{
	background:#f8f7f7;
	width:1200px;
	cursor:pointer;
}
.main_inline_doks:hover
{
	background:#c9f2ff;
}
.zeile_bearb
{
	background:#f1f1f1;
	height:25px;
	margin-top:3px;
}
.zeile_bearb:hover
{
	background:#c9f2ff;
}
.line_bearb
{
	width:100%;
	background:#f1f1f1;
	height:25px;
	margin-top:3px;
  	transition: 0.5s;
}
.line_bearb:hover
{
	background:#cccccc;
	cursor:pointer;
	transition:opacity 2s linear;
	opacity: 1;

}
.print_options
{
	margin-left:7px;
	padding:7px;
	cursor:pointer;
	float:left;
}
.print_options:hover
{
	background:#f1f1f1;
}
.CursorPointer
{
	cursor:pointer;
}
.TextAlignLeft
{
	text-align: left;
}
.TextAlignRight
{
	text-align: right;
}
.AuftragFelder
{
	width: 250px;
	padding: 5px;
}
.BorderTop
{
	border-top:1px solid #cccccc;
}
.BorderRight
{
	border-right:1px solid #cccccc;
}
.BorderRounded
{
	border-radius: 5px;
}
.DisplayNone
{
	display:none;
}
.DisplayBlock
{
	display: block;
}
.DisplayInline
{
	display: inline;
}
.PositionAbsolute
{
	position:absolute;
}
.PaddingSmall
{
	padding: 0rem 0.3rem;
}
.Padding0
{
	padding:0px;
}
.Padding2
{
	padding:2px;
}
.Padding3
{
	padding:3px;
}
.Padding5
{
	padding:5px;
}
.Padding6
{
	padding:6px;
}
.Padding7
{
	padding:7px;
}
.Padding10
{
	padding:10px;
}
.Padding15
{
	padding:15px;
}
.alert-danger
{
	background-color: #e63946;
	color:#332a2a;
	font-size: 22px;
}
.ResultGreen
{
	background:#ddede6;
	border: 1px solid #198754;
	border-radius: 15px;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
	padding: 10px;
	color: #000000;
	margin-bottom: 20px;
}
.OverFlowHidden
{
	overflow: hidden;
}
.ClearBoth
{
	clear:both;
}
.clearflex{
    width:100%;
}
.WorkFlowHeader
{
	padding:15px;
	font-size:18px;
	cursor:pointer;
	height: 60px;
}
.WorkFlowHeader:hover
{
	background: #f6d9af;
	border-radius: 5px;
}
.WorkflowContainer
{
	background: #ffffff;
	border-radius: 5px;
}
.HeadSymb
{
	font-size:20px;
	margin-bottom: 5px;
}
.Step 
{
	font-weight: normal;
	font-size: 14px;
	float:left;
	text-align: center;
	cursor: pointer;
}
.Step:hover
{	
	background: #f1f0f0;
	color:rgb(58, 58, 58);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.52); 
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.52);
}
.StepActive
{
	background:#d1e7dd;
	font-size: 14px;	
	float:left;
	text-align: center;
	cursor: pointer;
}
.FloatLeft
{
	float:left;
}
.TextRight
{
	text-align:right;
}
.TextLeft
{
	text-align:left;
}
.TextCenter
{
	text-align:center;
}
.TextSize12
{
	font-size: 12px;
}
.TextSize18
{
	font-size: 18px;
}
.TextSize20
{
	font-size: 20px;
}
.LineHeight16
{
	line-height: 16px;
}
.LineHeight18
{
	line-height: 18px;
}
.LineHeight22
{
	line-height: 22px;
}
.DisplayInline
{
	display:inline;
}
.MargLeft0
{
	margin-left:0px;
}
.MargLeft5
{
	margin-left:5px;
}
.MargLeft15
{
	margin-left:15px;
}
.MargLeft15Responsive
{
	margin-left:15px;
}
.MargRight10
{
	margin-right:10px;
}
.MargTop-20
{
	margin-top:-20px;
}
.MargTop-2
{
	margin-top:-2px;
}
.MargTop0
{
	margin-top:0px;
}
.MargTop2
{
	margin-top:2px;
}
.MargTop5
{
	margin-top:5px;
}
.MargTop9
{
	margin-top:9px;
}
.MargTop10
{
	margin-top:10px;
}
.MargTop20
{
	margin-top:20px;
}
.MargTop30
{
	margin-top:30px;
}
.MargTop40
{
	margin-top:40px;
}
.MargTop60
{
	margin-top:60px;
}
.MargLeft2
{
	margin-left:2px;
}
.MargLeft5
{
	margin-left:5px;
}
.MargLeft10
{
	margin-left:10px;
}
.MargLeft20
{
	margin-left:20px;
}
.MargLeft30
{
	margin-left:30px;
}
.MargLeft40
{
	margin-left:40px;
}
.MargBottom0
{
	margin-bottom:0px;
}
.MargBottom10
{
	margin-bottom:10px;
}
.MargBottom20
{
	margin-bottom:20px;
}
.MargBottom40
{
	margin-bottom:40px;
}
.W10
{
	width:10px;
}
.W20
{
	width:20px;
}
.W30
{
	width:30px;
}
.W32
{
	width:32px;
}
.W40
{
	width:40px;
}
.W50
{
	width:50px;
}
.W70
{
	width:70px;
}
.W70P
{
	width:70%;
}
.W80
{
	width:80px;
}
.W100
{
	width:100px;
}
.W120
{
	width:120px;
}
.W150
{
	width:150px;
}
.W170
{
	width:170px;
}
.W175
{
	width:175px;
}
.W180
{
	width:180px;
}
.W200
{
	width:200px;
}
.W250
{
	width:250px;
}
.W300
{
	width:300px;
}
.W320
{
	width:320px;
}
.W350
{
	width:350px;
}
.W370
{
	width:370px;
}
.W390
{
	width:390px;
}
.W400
{
	width:400px;
}
.W450
{
	width:450px;
}
.W500
{
	width:500px;
}
.W600
{
	width:600px;
}
.W650
{
	width:650px;
}
.W700
{
	width:700px;
}
.W750
{
	width:750px;
}
.W800
{
	width:800px;
}
.W830
{
	width:830px;
}
.W850
{
	width:850px;
}
.W900
{
	width:900px;
}
.W1100
{
	width:1100px;
}
.W1200
{
	width:1200px;
}
.W500R
{
    width: 500px;
}
.W400R
{
    width: 400px;
}
.W1000R
{
	width:1000px;
}
@media (max-width:900px)
{
	.W1000R
	{
		width:100%;
	}
}
@media (max-width:550px)
{
	.W400R
    {
        width:100%;
    }
	.W500R
    {
        width:100%;
    }
	.W1000R
	{
		width:100%;
	}
    .ResponsiveAdd
    {
        width:90%;
        margin-top:7px;
    }
}
.W95P
{
	width:95%;
}
.W100P
{
	width:100%;
}
.MW300
{
	max-width: 300px;
}
.MW700
{
	max-width: 700px;
}
.MW1200
{
	max-width: 1200px;
}
.W70P
{
	width: 70%;
}
.flex-item {
	flex: 1 1 300px;
	min-width: 300px;
  }
.W30P
{
	width: 30%;
}
.H10
{
	height:10px;
}
.H20
{
	height:20px;
}
.H25
{
	height:25px;
}
.H30
{
	height:30px;
}
.H35
{
	height:35px;
}
.H40
{
	height:40px;
}
.H45
{
	height:45px;
}
.H43
{
	height:43px;
}
.H50
{
	height:50px;
}
.H60
{
	height:60px;
}
.H70
{
	height:80px;
}
.H80
{
	height:80px;
}

.H100
{
	height:100px;
}
.H120
{
	height:120px;
}
.H200
{
	height:200px;
}
.H250
{
	height:250px;
}
.H300
{
	height:300px;
}
.H400
{
	height:400px;
}
.H450
{
	height:450px;
}
.H500
{
	height:500px;
}
.H550
{
	height:550px;
}
.H600
{
	height:600px;
}
.H650
{
	height:650px;
}
.H700
{
	height:700px;
}
.H750
{
	height:750px;
}
.H800
{
	height:800px;
}
.MH70
{
	min-height:70px;
}
.MH100P
{
	min-height: 100%;
}
.HAuto
{
	height:auto;
}
.FontSize10
{
	font-size:10px;
}
.FontSize12
{
	font-size:12px;
}
.FontSize14
{
	font-size:14px;
}
.FontSize16
{
	font-size: 16px;
}
.FontSize18
{
	font-size: 18px;
}
.FontSize20
{
	font-size: 20px;
}
.FontSize22
{
	font-size: 22px;
}
.FontSize24
{
	font-size: 24px;
}
.FontSize26
{
	font-size: 26px;
}
.FontSize35
{
	font-size:35px;
}
.Green
{
	background:rgb(3, 163, 3);
}
.BackgroundGrey
{
	background: #F2F4F7;
}
.HoverGrey:hover
{
	color:#356364;
}
.CircleOK
{
	color:#5c8b02;
	font-size: 10px;
	margin-top:0px;

}




.crypto-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.crypto-price {
    font-size: 16px;
    font-weight: 700;
    color: #2ecc71;
    margin-bottom: 6px;
}

.crypto-info {
    font-size: 10px;
    color: #777;
    line-height: 1.4;
}
.slider-containerC {
	overflow: hidden;
	width: 100%;
	position: relative;
	align-items: center;
	align-content: center;
  }
  
  .slider-wrapper {
	display: flex;
	transition: transform 0.8s ease-in-out;
	gap:25px;
  }
  /* Flex-Layout wenn ≤4 Karten */
.FlexFrameRow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px;
  }
.sidebar-Chart {
	position: fixed;
	top: 50%;
	left: -1000px; /* Startposition außerhalb des Bildschirms */
	transform: translateY(-50%);
	width: 100%;
	max-width: 900px;
	height: 400px;
	background-color: #f0f0f0;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	transition: left 0.3s ease; /* Animation für das Ausfahren */
	z-index: 99999;
}
/* Wenn aktiv, wird die Sidebar sichtbar */
.sidebar-Chart.active {
	left: 0; /* Sidebar wird ausgefahren */
}
.logo-svg {
	min-width: 60px;
	max-width: 136px;
  }
  @media (max-width: 768px) {
	.logo-svg {
	  transform: scale(0.7);
	}
  }
  .NoMobile
  {
	display:block;
  }
  @media (max-width: 768px) {
	.NoMobile {
	  display: none;
	}
  }
.DarkLink
{
	color:#0d2a2b;
}
.DarkLink:hover
{
	color:#ffffff;
}
/* Button zum Auslösen */
.toggle-btn {
	position: fixed; /* Button bleibt fixiert am linken Bildschirmrand */
	margin-top: -220px;
	top: 50%;
	left: 10px; /* Abstand vom linken Rand */
	width: 70px;
	transform: translateY(-50%);
	cursor: pointer;
	background-color: #0d2a2b;
	color: white;
	border: none;
	padding: 10px;
	border-radius: 25px;
	font-size:22px;
	z-index: 1000; /* Damit der Button über anderen Elementen liegt */
}
@media (max-width: 768px) {
	.toggle-btn {
		top: auto;
		bottom: 20px; /* Abstand vom unteren Rand */
		left: 20px;   /* Abstand vom linken Rand */
		transform: none;
		margin-top: 0;
	}
  }
.slider-containerN {
	overflow: hidden;
	max-width: 100%;
	cursor: grab;
	user-select: none;
	position: relative;
  }
  
  .slider-track {
	display: flex;
	gap: 20px;
	transition: transform 0.3s ease;
	pointer-events: none;
  }
  
  .slider-track.active {
	cursor: grabbing;
  }
  /* Slider-Modus bei >4 Karten */
  .slider-containerC {
	overflow: hidden;
	position: relative;
	width: 100%;
  }
  
  .slider-wrapper {
	display: flex;
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	width: max-content; /* Wichtig gegen Auseinanderziehen */
  }

  .crypto-card {
	flex: 0 0 200px;
	min-width: 200px;
	max-width: 200px;
	margin: 0 7.5px;
	box-sizing: border-box;
	flex-shrink: 0; /* Verhindert Stauchung */
	border-radius: 8px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-align: center;
    transition: all 0.3s ease;
	box-sizing: border-box;
	opacity: 0;
	animation: slideIn 1s forwards;
	background-color: #ffffff;
  }
  .crypto-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
  @media (max-width: 768px) {
	.crypto-card {
	  flex: 0 0 calc(50% - 15px); /* 2 Karten auf Mobile */
	}
  }

  
  @keyframes slideIn {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
  }
.WorkflowOpen
{
	background:#cccccc;
	color:#666666;
	border-color: #cccccc;
	border-radius: 10;
	width:200px;
	height:30px;
	text-align: center;
	margin-top: 3px;
	margin-left: 3px;
	float:left;
}
.TotalAmount
{
	font-size:18px;
	border-top:3px double;

}
.AlertHover
{
	cursor:pointer;
}
.AlertHover:hover
{
	background:#6da0a1;
	border-color: #356364;
	transition: 0.4s;
}
.btn-primary
{
	background-color: #1fb7be;
	border-color: #1fb7be;
	transition: 0.4s;
}
.btn-primary:hover
{
	background-color: #afd7d8;
	border-color: #1c3e3f;
}
.btn-secondary
{
	background-color: #d6eeee;
	border-color: #afd7d8;
	transition: 0.4s;
	color:#000000;
}
.btn-secondary:hover
{
	background-color: #1c3e3f;
	border-color: #1c3e3f;
}
.Frame
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    flex-flow: wrap;  
	flex-wrap: wrap;
	row-gap: 10px;
}
.EvBox
{
	padding:5px;
	border: 1px solid #284781;
	text-align: center;
	background:#f1f1f1;
	margin-left: 7px;
	cursor:pointer;
}
.EvBox:hover
{
	background:#516997;
}
.EvBoxActive
{
	padding:5px;
	border: 1px solid #6bc449;
	text-align: center;
	background:#6bc449;
	margin-left: 7px;
	-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.62); 
	box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.62);
}
/* (A) UPLOAD ZONE */
#upzone {
	width:450px;
	height: 80px; 
	background: #f1f1f1;
	border:3px dashed #cccccc;
	padding: 2px;
	text-align:center;
  }
  #upzone.highlight {
	background: rgb(184, 14, 2);
	opacity: 2;
	transition: 0.4s;
  }
  
  /* (B) UPLOAD FORM */
  #upform {
	display: none;
  }
  .upzone {
	width: 450px; 
	height: 80px; 
	background: #f1f1f1;
	border:3px dashed #cccccc;
	padding: 2px;
	text-align:center;
  }
  .upzone.highlight {
	background: rgb(184, 14, 2);
	opacity: 2;
	transition: 0.4s;
  }
  
  /* (B) UPLOAD FORM */
  .upform {
	display: none;
  }
.Transition
{
	transition: color .35s ease-in-out,background-color .35s ease-in-out,border-color .35s ease-in-out,box-shadow .15s ease-in-out;
}
.drop-down-select-list 
{ 
	display: none;
	position: absolute;
	z-index: 1; 
	text-align: left;
	margin-top: 0px; 
	margin-left: 10px; 
	padding: 0px; 
	background-color: #ffffff; 
	width:250px;
	overflow-y:hidden;
	overflow-x: hidden;
	box-shadow: 2px 10px 18px 1px rgba(16, 24, 40, 0.25);
	border-radius: 5px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
} 
.drop-down-select-list-li 
{ 
	margin-left:0px;
	display: inline-block; 
	min-height: 30px; 
	min-width: 280px; 
	width: 100%; 
	padding: 5px 15px 5px 35px; 
	padding-left:10px;
	background-color: #ffffff; 
	background-position: left 10px center; 
	background-repeat: no-repeat; 
	font-size: 16px; 
	text-align: left; 
	color: #666666; 
	opacity: 0.7; 
	box-sizing: border-box; 
	cursor:pointer;
	overflow: hidden;
}
.drop-down-select-list-li:hover
{ 
	background-color: #f1f1f1; 
}
.drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }
.DropdownNoBOrder
{
	border:0px;
	background-color: #f4f4f5;
}
#ShowNews {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	background: white;
	border-radius: 12px;
	padding: 30px;
	max-width: 400px;
	width: 80%;
	max-height: 500px;
	overflow: auto;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.4s ease, opacity 0.4s ease;
	z-index: 1000;
}

#ShowNews.visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	pointer-events: auto;
}
.HeadNewsBlog
{
	font-size: 35px;
}
.newslide
{
	display:none;
	background:#ffffff;
	box-shadow: inset 0 0 1em #ffffff, 0 0 1em #666666;
	width:1100px;
	padding:20px;
	position:absolute;
	margin-top:0px;
	margin-bottom:50px;
	border-radius: 7px 7px 7px 7px;
}
.news-container {
  max-width: 350px;
  margin: 10px auto;
  padding: 20px;
  border-radius: 16px;
  background: #f9f9f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: "Segoe UI", sans-serif;
  transition: 0.3s;
  cursor: pointer;
  
}

.news-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--Ocean2);
  transform: translateY(-5px); /* Leichtes Heben beim Hover */
  background: linear-gradient(to bottom, #f9f9f9 60%, #bcf9fc 100%);
}

.news-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.news-meta {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 15px;
}

.news-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
}

.news-link {
  display: inline-block;
  margin-top: 15px;
  font-size: 0.9rem;
  color: #0077cc;
  text-decoration: none;
}

.news-link:hover {
  text-decoration: underline;
}
.PermissionHead
{
	background:#f1f1f1;
	font-weight:bold;
	font-size:20px;
	padding:3px;
	width:1120px;
}
.PermissionLine
{
	padding:3px;
	width:1050px;
	float:left;
	margin-left:15px;
}
.PermissionCell
{
	float:left;
	text-align: left;
}
.list-group {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	border-radius: 0.25rem;
  }
  .list-group-item-head {
	position: relative;
	display: block;
	padding: 0.65rem 1.25rem;
	background-color: #f1f1f1;
	border: 1px solid rgba(0, 0, 0, 0.125);
	font-weight:bold;
	font-size: 20px;
	margin-top:3px;
	cursor:pointer;
	float:left;
  }
  .list-group-item {

	float:left;
	margin-left:15px;
	position: relative;
	display: block;
	padding: 0.55rem 1.1rem;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
	cursor:pointer;
  }
  .list-group-item-action {
	width: 100%;
	color: #495057;
	text-align: inherit;
  }
  
  .list-group-item:hover, .list-group-item-action:focus {
	z-index: 1;
	color: #495057;
	text-decoration: none;
	background-color: #f8f9fa;
  }
  .back-to-top
  {
	  color:#666666;
	  text-align:right;
	  position: fixed;
	  bottom:20px;
	  right:20px;
	  padding:1em;
	  font-size:45px;
	  float:right;
  }
  .InfoI4
  {
	  display:none;
	  width:500px;
	  padding:7px;
	  color:#666666;
	  border:0px solid #b4ba55;
	  position:absolute;
	  border-radius: 4px 4px 4px 4px;
	  background-image: linear-gradient(to top, #ffffff 9%, #ffffff 95%);
	  -webkit-transition: left .5s ease-in;
	  -moz-transition: left .5s ease-in;
	  -o-transition: left .5s ease-in;
	  -ms-transition: left .5s ease-in;
	  transition: 0.3s;
	  box-shadow: 10px 10px 15px rgb(58, 58, 58);
  }
.CalBackHead
  {
	color:#f1f1f1;
	padding:10px;
	background:#356364;
	font-size: 16px;
	font-weight: bold;
  }
.CalBack
{
	background:#f1f1f1;
	padding:10px;
}
.CalBack:hover
{
	background: #b6c1d6;
	-webkit-transition: left .5s ease-in;
	-moz-transition: left .5s ease-in;
	-o-transition: left .5s ease-in;
	-ms-transition: left .5s ease-in;
	transition: 0.5s;
}
.SpecialDay
{
	background: #dddddd;
}
.CalToday
{
	border:2px solid #ce626b;
}
.ui-datepicker-header
{
	color: #6985b9;
}
.ui-datepicker-calendar
{
	color: #6985b9;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
	color: #6985b9;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
	color: #6985b9;
}
.ui-datepicker-month
{
	display: block;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	width:250px;
	float:left;
}
.ui-datepicker-year
{
	display: block;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	width:100px;
	float:left;
}
.RegisterBox
{

	max-width: 700px;
	width: 100%;
	height: 300px;
    background-color: var(--StdBack);
    padding:20px;
    border-radius: 20px;
    border:1px solid var(--secondary-black);
    margin-top: 100px;
    z-index:9999;
	transition: left 0.5s ease; /* Animation für die Bewegung nach links */
}
.RegisterBox2
{

    max-width: 660px;
	width: 100%;
    background-color: var(--StdBack);
    padding:20px;
    border-radius: 20px;
    border:1px solid var(--secondary-black);
    margin-top: 100px;
	height: 200px;
    z-index:9999;
}
.RegisterBox3
{

    max-width: 660px;
	width: 100%;
    background-color: var(--StdBack);
    padding:20px;
    border-radius: 20px;
    border:1px solid var(--secondary-black);
    margin-top: 100px;
	height: 200px;
    z-index:9999;
	transition: left 0.5s ease; /* Animation für die Bewegung nach links */
}
.product-card {
	background-color: white;
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 660px;
	width: 100%;
	overflow: hidden;
	text-align: center;
	transition: transform 0.3s;
	padding:7px;
}

.product-card:hover {
	transform: scale(1.05);
}

.product-card img {
	width: 150px;
	border-bottom: 1px solid #ddd;
}

.product-card h2 {
	font-size: 18px;
	margin: 15px 0;
	color: #333;
}

.product-card p {
	font-size: 16px;
	color: #777;
}

.product-card .price {
	font-size: 20px;
	color: #28a745;
	margin-bottom: 15px;
}

.product-card a {
	display: inline-block;
	padding: 10px 20px;
	background-color: #007bff;
	color: white;
	text-decoration: none;
	border-radius: 25px;
	margin-bottom: 20px;
	transition: background-color 0.3s;
}

.product-card a:hover {
	background-color: #0056b3;
}
.success-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;
    
    .check-icon {
        width: 80px;
        height: 80px;
        position: relative;
        border-radius: 50%;
        box-sizing: content-box;
        border: 4px solid #4CAF50;
        
        &::before {
            top: 3px;
            left: -2px;
            width: 30px;
            transform-origin: 100% 50%;
            border-radius: 100px 0 0 100px;
        }
        
        &::after {
            top: 0;
            left: 30px;
            width: 60px;
            transform-origin: 0 50%;
            border-radius: 0 100px 100px 0;
            animation: rotate-circle 4.25s ease-in;
        }
        
        &::before, &::after {
            content: '';
            height: 100px;
            position: absolute;
            background: #FFFFFF;
            transform: rotate(-45deg);
        }
        
        .icon-line {
            height: 5px;
            background-color: #4CAF50;
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 10;
            
            &.line-tip {
                top: 46px;
                left: 14px;
                width: 25px;
                transform: rotate(45deg);
                animation: icon-line-tip 0.75s;
            }
            
            &.line-long {
                top: 38px;
                right: 8px;
                width: 47px;
                transform: rotate(-45deg);
                animation: icon-line-long 0.75s;
            }
        }
        
        .icon-circle {
            top: -4px;
            left: -4px;
            z-index: 10;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: absolute;
            box-sizing: content-box;
            border: 4px solid rgba(76, 175, 80, .5);
        }
        
        .icon-fix {
            top: 8px;
            width: 5px;
            left: 26px;
            z-index: 1;
            height: 85px;
            position: absolute;
            transform: rotate(-45deg);
            background-color: #FFFFFF;
        }
    }
}
.Shaddow 
{
	box-shadow: 	0px 14px 28px -12px rgba(16, 24, 40, 0.18);
}
.ShaddowSmooth
{
	box-shadow: var(--wb-ds-box-shadow--smooth);
	box-shadow: 0 5px 20px -2px rgba(0,0,0,.35), 0 2px 6px -1px rgba(0,0,0,.35);
}
.ShaddowSmooth2
{
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width : 1000px) 
{
.upzone {
	width:95%;
	}
.W650{
	width:90%;
}
.W500{
	width:90%;
}
}