/* Allgemeine Stile */
body {
    background-color: #333;
	margin: 0;
    padding: 0;
    font-family: Relaunch, sans-serif;
}

@font-face {
    font-family: 'Relaunch';
    src: url('/fonts/Relaunch-Regular.woff2') format('woff2'),
		 url('/fonts/Relaunch.otf') format('otf'),
         url('/fonts/Relaunch-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Skylar';
    src: url('/fonts/SkylarSansRegular.woff2') format('woff2'),
		 url('/fonts/SkylarSansRegular.ttf') format('ttf'),
         url('/fonts/SkylarSansRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Media Query für Bildschirmgrößen kleiner als 768px (üblicherweise Smartphones) */
@media screen and (max-width: 3840px) {
    .nav-button {
        /* Neue Stile für kleinere Bildschirmgrößen hier */
        display: block; /* Zum Beispiel Block-Elemente, damit sie untereinander statt nebeneinander angezeigt werden */
        margin-bottom: 10px; /* Ein Beispiel für zusätzlichen Abstand zwischen den Buttons */
    }
}

/* Header-Stile */
.sticky-header {
    position: fixed;
    top: 0px; /* Initial ausblenden */
    left: 0;
    width: 100%;
    background-color: #333;
    z-index: 1000;
    transition: top 0.3s ease;
}

.sticky-header.visible {
    top: 0; /* Sichtbar, am oberen Bildschirmrand fixiert */
}

.container_head {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-button {
    width: 150px; /* Anpassen der Breite an deine Bedürfnisse */
    height: 100px; /* Anpassen der Höhe an deine Bedürfnisse */
    display: inline-block;
    background-size: cover;
    margin-right: 0px; /* Abstand zwischen den Logos anpassen */
	cursor: pointer; /* Zeige an, dass es sich um einen anklickbaren Button handelt */
    transition: background-color 0.3s ease; /* Übergangseffekt für sanftes Ändern des Hintergrunds */
}

.logo-button:hover {
    background-color: #fafafa;
}

.logo-button1 {
    width: 320px; /* Anpassen der Breite an deine Bedürfnisse */
    height: 85px; /* Anpassen der Höhe an deine Bedürfnisse */
    display: inline-block;
    background-size: cover;
    margin-right: 0px; /* Abstand zwischen den Logos anpassen */
}

.logo-button2 {
    width: 81px; /* Anpassen der Breite an deine Bedürfnisse */
    height: 54px; /* Anpassen der Höhe an deine Bedürfnisse */
    display: inline-block;
    background-size: cover;
    margin-right: 0px; /* Abstand zwischen den Logos anpassen */
}

.logo-button2:hover {
    transform: scale(1.05); /* Leichter Zoom-Effekt */
}

#logo_3D {
    background-image: url('/Bilder/Logo/logo_icon_transparent.webp');
	background-color: #333;
}

#logo_3D:hover {
    transition: background-image 0.3s ease; /* Übergangseffekt für sanftes Ändern des Hintergrunds */
	background-image: url('/Bilder/Symbol_3D_bunt.webp');
}

#logo_Laser {
    background-image: url('/Bilder/Logo/logo_icon_transparent2.webp');
	background-color: #333;
}

#logo_Laser:hover {
    transition: background-image 0.4s ease; /* Übergangseffekt für sanftes Ändern des Hintergrunds */
	background-image: url('/Bilder/Symbol_Laser_bunt.webp');
}

#logo_Druck {
    background-image: url('/Bilder/Logo/Picturoni_header.webp');
	background-color: #333;
}

#logo_Druck:hover {
    transition: background-image 0.4s ease; /* Übergangseffekt für sanftes Ändern des Hintergrunds */
	background-image: url('/Bilder/Symbol_Druck_bunt.webp');
}

#logo_Foto {
    background-image: url('logo_icon_transparent4.webp');
	background-color: #333;
}

#logo_Foto:hover {
    transition: background-image 0.3s ease; /* Übergangseffekt für sanftes Ändern des Hintergrunds */
	background-image: url('Symbol_Foto_bunt.webp');
}

#logo_Text {
	background-image: url('/Bilder/Logo/logo_text_schwarz.webp');
}

#logo_Smartphone {
	background-image: url('/Bilder/Logo/logo_icon_transparent.webp');
}

/* Navigation-Stil */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 0px;
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.nav-button {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.nav-button:hover {
    background-color: #69CBE8;
	color: #000;
}

.nav-button.active {
    background-color: #69cbe8;
    color: #000;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.nav-button.active:hover {
    background-color: #ff6900;
	color: #fff;
}

/* Falls auch der Dropdown-Wrapper farblich hervorgehoben werden soll */
.dropdown-wrapper.active > .nav-button {
  color: #ff6900;
  border-bottom: 3px solid #59cbe8;
  font-weight: 600;
}

.buy-button {
    background-color: #ff6900;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-top: -10px
}

.buy-button:hover {
    background-color: #69CBE8;
	color: #000;
}

/* Home / Hero-Sektion-Stile */
/* Stil für den Container mit Video-Hintergrund */
.video-background {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Video hinter dem Inhalt */
    overflow: hidden; /* Verhindert, dass das Video über den Container hinausragt */
}

.video-background video {
    object-fit: cover; /* Video skaliert, um den gesamten Bereich abzudecken */
    width: 100%;
    height: 100%;
}

.video-text {
    position: absolute;
    top: 168px; /* Du kannst den Abstand anpassen, um den Text zu positionieren */
    left: 50px;
    color: white;
    font-size: 30px;
    background-color: transparent;
    padding: 10px;
    border-radius: 5px;
    display: none; /* Standardmäßig nicht sichtbar */
    z-index: -2;
}

.hero {
    background-size: 100% auto;
    background-position: center;
	background-repeat: no-repeat;
    height: 98vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #59cbe8;
    text-align: center;
	margin-top: 100px; /* Verschiebt den gesamten Block nach unten */
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1; /* Damit der Inhalt vor dem Video bleibt */
    text-align: center;
    margin-top: -189px;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.work-button {
    background-color: #ff6900;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.work-button:hover {
    background-color: #69CBE8;
	color: #000;
}

/* Über-uns-Seite-Stile */
.container_about {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.about-section {
    background-color: #333;
    padding: 50px 0;
	color: #fff;
}

.about-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
	color: #59cbe8;
}

.about-section p {
    font-size: 1.1em;
    margin-bottom: 30px;
}

.mission-values {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.mission, .values {
    flex-basis: 45%;
}

.mission h3, .values h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
	color: #ff6900;
}

.values ul {
    list-style-type: none;
    padding: 0;
}

.values li {
    margin-bottom: 10px;
}

.vision {
    margin-top: 50px;
}

.vision h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
	color: #ff6900;
}

.vision p {
    font-size: 1.1em;
    margin-bottom: 30px;
}

.contact-button {
    background-color: #ff6900;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 1.1em;
}
	
.contact-button:hover {
    background-color: #69CBE8;
	color: #000;
}

/* AGB-Seite-Stile */
.container_AGB {
    margin: 0 auto;
    padding: 30px;
}

.terms-section {
    padding: 50px 0;
	color: #fff;
}

.terms-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
	color: #59cbe8;
}

.terms-section strong {
	color: #ff6900;
}
	
.terms-section p {
    font-size: 1.1em;
    margin-bottom: 30px;
}

.terms-section ul {
    list-style-type: none;
    padding: 0;
}

.terms-section li {
    margin-bottom: 10px;
}

.terms-section a {
    color: #59cbe8;
    text-decoration: none;
}

.terms-section a:hover {
    text-decoration: underline;
	color: #ff6900;
}

/* Dienstleistungen-Seite-Stile */
.service {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    transition: background-color 0.3s ease;
}

.service-content_oben {
    margin-top: 150px;
}

.service-image {
    flex: 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Falls das Bild über die Höhe hinausragt */
}

.service-image a {
    display: block;
    position: relative;
    text-decoration: none;
    color: white;
}

.service-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.service-image span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0);
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
}

.service-image a:hover span {
    background-color: rgba(255, 105, 0, 0.5); /* Hintergrundfarbe ändern */
	color: #fff;
}

.service-text {
    flex: 1;
    text-align: left;
}

.service-text h2 {
    margin: 0 0 10px;
    font-size: 24px;
    color: #59cbe8;
}

.service-text p {
    margin: 0;
    color: #fff;
}

.service-text_l {
    flex: 1;
    text-align: right;
}

.service-text_l h2 {
    margin: 0 0 10px;
    font-size: 24px;
    color: #ff6900;
}

.service-text_l p {
    margin: 0;
    color: #fff;
}

/* Specific service styles */
.service-3d-druck {
    background-image: url('/Bilder/Symbol_3D.webp'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
}

.service-lasergravur {
    background-image: url('/Bilder/Symbol_Laser.webp'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
}

.service-sublimationsdruck {
    background-image: url('/Bilder/Symbol_Druck.webp'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
}

/* Footer-Stile */
.footer-container {
    background-color: #333;
    color: #fff;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 20px;
}

.footer-logo img {
    height: 105px;
    width: auto;
}

.footer-contact img {
    height: 140px;
}

.footer-links{
    flex: 1 1 20%;
    padding: 0px;
}

.footer-contact {
    flex: 1 1 20%;
    padding: 0px;
}

.footer-social{
    flex: 1 1 20%;
    padding: 0px;
}

.footer-newsletter {
    flex: 1 1 20%;
    padding: 0px;
}

.footer-payment {
    flex: 1 1 20%;
    padding: 0px;
}

.footer-trust {
    flex: 1 1 20%;
    padding: 0px;
}

.footer-social ul {
    list-style-type: none;
    padding: 0;
}

.footer-links ul {
    list-style-type: none;
    padding: 0;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-social ul li {
    margin-bottom: 10px;
}

.footer-links ul li a{
    color: #fff;
    text-decoration: none;
}

.footer-links ul li a:hover {
    text-decoration: underline;
	color: #59cbe8;
}

.footer-newsletter form {
    display: flex;
    flex-direction: column;
}

.footer-newsletter input {
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
	font-family: Relaunch, sans-serif;
}

.footer-newsletter button {
    padding: 10px 20px;
    background-color: #ff6900;
    color: #fff;
    border: none;
    border-radius: 5px;
	text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
	font-family: Relaunch, sans-serif;
    font-size: 1.1em;
}

.footer-newsletter button:hover {
    background-color: #59cbe8;
	color: #000;
}

.footer-payment img{
	height: 25px;
    margin-right: 15px;
	margin-bottom: 15px;
}

.footer-trust img {
    width: 130px;
    margin-right: 10px;
}

.footer-bottom {
    background-color: #59cbe8;
    padding: 10px;
    text-align: center;
    width: 99.2%;
	color: #000;
}

@media (max-width: 992px) {
  .footer-bottom {
    margin-bottom: 65px; /* Platz für das mobileapp_menu */
  }
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    color: #000;
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
	color: #ff6900;
}

.footer-social ul {
    display: flex;
    justify-content: flex-start;
}

.footer-social ul p {
	margin-top: 0px;
}

.footer-social li {
    margin: 0 10px;
}

.footer-social img {
    width: 30px;
    height: 30px;
	margin-right: 0px;
	margin-left: 0px;
}

.footer-social a img:hover {
    transform: scale(1.1); /* Leichter Zoom-Effekt */
}

.footer-trust a img:hover {
    transform: scale(1.1); /* Leichter Zoom-Effekt */
}

.footer-trust a img {
    margin-top: 13px;
}

.footer-header {
  width: 100%;
  text-align: left;
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-bottom: 5px;
  border-radius: 6px;
}

.footer-header h2::after {
  content: "▸";
  float: right;
  transition: transform 0.2s;
}

.footer-header p::after {
  content: "▸";
  float: right;
  transition: transform 0.2s;
}

.footer-header h2 {
  font-family: Relaunch, sans-serif;
  text-align: center;
  font-size: 24px;
}

.footer-header p {
  font-family: Relaunch, sans-serif;
  font-size: 24px;
  color: #ff6900;
  font-weight: bold;
  margin-top: 20px;
  margin-left: -10px;
}

.footer-section.open .footer-header h2::after {
  transform: rotate(90deg);
}

.footer-section.open .footer-header p::after {
  transform: rotate(90deg);
}

.footer-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  background: #333;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 0 10px;
}

.footer-section.open .footer-content {
  max-height: 600px;
  padding: 10px;
}

/* Kontakt-Footer-Stile */
.container_contact {
    text-align: center;
    margin: 20px 0;
}

.Mail-button {
    background-color: #ff6900;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 1.1em;
	white-space: nowrap; /* Verhindert, dass die Buttons in mehrere Zeilen umgebrochen werden */
	display: inline-block;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Abstand zwischen den Buttons */
}
	
.Mail-button:hover {
    background-color: #69CBE8;
	color: #000;
}

.WhatsApp-button {
    background-color: #ff6900;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 1.1em;
	white-space: nowrap; /* Verhindert, dass die Buttons in mehrere Zeilen umgebrochen werden */
	display: inline-block;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Abstand zwischen den Buttons */
}
	
.WhatsApp-button:hover {
    background-color: #69CBE8;
	color: #000;
}

@media (max-width: 3840px) {
    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }
	.Mail-button, .WhatsApp-button {
        margin: 5px 0; /* Abstand zwischen den Buttons in vertikaler Richtung */
    }
}

/* Impressum Styles */
.container-impressum {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 100px;
}

.impressum h1 {
    text-align: center;
    margin-bottom: 20px;
	color: #59cbe8;
	font-size: 3em;
}

.impressum strong {
	color: #59cbe8;
	font-size: 2em;
	font-family: Skylar Sans;
	margin-left: -18px;
}

.impressum h2 {
    margin-top: 20px;
    color: #ff6900;
	margin-left: 20px;
}

.impressum p {
    margin-bottom: 10px;
	color: #fff;
	margin-left: 40px;
}

.impressum a {
    color: #59cbe8;
    text-decoration: none;
}

.impressum a:hover {
    text-decoration: underline;
	color: #ff6900;
}

.main {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

/*Einzel-Produkt-Stile*/

.product-container {
    display: flex;
    width: 100%;
	margin-top: 100px;
}

.product-images {
    display: flex;
    align-items: flex-start;
	margin-top: 20px;
}

.large-image {
    width: 70%; /* Großes Bild soll 70% der Breite einnehmen */
    margin-left: 20px; /* Abstand zwischen großen Bild und kleinen Bildern */
}

.large-image img {
    width: 100%;
    height: auto;
    display: block;
}

.small-images {
    display: flex;
    flex-direction: column; /* Anordnung der kleinen Bilder in einer Spalte */
    align-items: flex-start; /* Ausrichtung am linken Rand */
    gap: 10px; /* Abstand zwischen kleinen Bildern */
	margin-left: 20px;
}

.small-images img {
    width: 50px; /* Breite der kleinen Bilder */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease; /* Übergangseffekt für sanfte Änderungen */
}

.small-images img:hover {
    transform: scale(1.1); /* Vergrößern des Bildes bei Hover */
}

.product-description a{
    color: #ff6900;
}

.product-description a:hover{
    color: #59cbe8;
}

.product-description h2 a{
    color: #59cbe8;
}

.product-description h2 a:hover{
    color: #ffffff;
}

.product-details {
    width: 45%;
    padding: 10px;
    background-color: #333;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	Color: #fff;
	margin-top: 10px;
}

.product-details h1 {
	Color: #59cbe8;
	font-size: 3em;
	margin-top: 0px;
}

.price {
    font-size: 1.5em;
    margin-bottom: 0px;
}

#preis-pro-stk {
	font-size: 1.1em;
	margin-bottom: 0px;
}

#gesamtpreis {
	font-size: 1em;
	margin-bottom: 0px;
	color: #ff6900;
    margin-top: 0px;
}

.lagerbestand,
.ausverkauft {
	margin-bottom: 10px;
	margin-top: 20px;
	color: #59cbe8;
}

.ausverkauft a {
	margin-bottom: 10px;
	margin-top: 20px;
	color: #ff6900;
}

.ausverkauft a:hover {
	color: #59cbe8;
}

.price p {
    font-size: 1em;
}

.price h2 {
    font-size: 14px;
}

.price select {
    font-size: 1em;
    padding: 5px;
    margin-left: 0px;
	margin-bottom: 20px;
	font-family: Relaunch, sans-serif;
}

#customMenge {
    height: 35px; /* Erhöht die Höhe des Eingabefelds */
    width: 50px; /* Kürzt die Breite des Eingabefelds */
    font-size: 20px; /* Vergrößert den Text, falls gewünscht */
	font-family: Relaunch, sans-serif;
    margin-top: -45px;
}

#customInputContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#priceReminder {
    margin-top: 20px; /* Abstand zwischen dem Eingabefeld und dem Text */
    margin-bottom: 10px;
    font-size: 14px;
}

#priceReminder a {
    color: #59cbe8;
    text-decoration: none;
    font-size: 15px;
}

#priceReminder a:hover{
    color: #ff6900;
}

.product-description h2, .product-description h3 {
    margin-top: 20px;
	color: #ff6900;
}

.product-description ul {
    list-style-type: disc;
    margin-left: 20px;
}

.product-description strong {
	color: #59cbe8;
}

.similar-products {
    margin-top: 40px;
	color: #ff6900;
}

.similar-products ul {
    list-style-type: none;
    padding: 0;
}

.similar-products li {
    margin-bottom: 10px;
}

.similar-products a {
    text-decoration: none;
    color: #59cbe8;
}

.similar-products a:hover {
    text-decoration: underline;
}

.etsy-button {
    background-color: #ff6900;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 20px;
	font-family: Relaunch, sans-serif;
    transition: background-color 0.3s ease;
    margin-right: 15px;
    margin-bottom: 15px;
    display: inline-block;
}

.etsy-button:hover {
    background-color: #59cbe8;
    color: #000;
}

/* Entfernt die Standard-Punkte der Liste und sorgt für einheitliche Ausrichtung */
.product ul, .dimensions-list {
    list-style: none; /* Entfernt Standard-Punkte der Liste */
    padding: 0;
    margin: 0;
}

/* Sorgt dafür, dass alle Listenelemente gleichmäßig eingerückt sind */
.product li {
    margin-bottom: 10px;
    padding-left: 0;  /* Einheitliche Einrückung für alle Elemente */
}

/* Flexbox für die Abmessungen (innerhalb der dimensions-list) */
.dimensions-list li {
    display: flex;
    justify-content: flex-start;
    align-items: center;  /* Zentriert den Text vertikal */
    margin-bottom: 5px; /* Optionaler Abstand zwischen den Zeilen */
}

/* Einheitliche Darstellung für das Label und den Wert */
.label, .value {
    display: inline-block;  /* Inline-Block sorgt für gleichmäßige Ausrichtung */
    text-align: left; /* Text links ausrichten */
}

.label {
    margin-right: 5px; /* Minimiert den Abstand zwischen Label und Wert */
    font-weight: bold;  /* Setzt das Label fett, falls gewünscht */
}

.value {
    white-space: nowrap;  /* Verhindert Umbruch bei Maßeinheiten */
}

/* Optional: Für alle Produkte einen einheitlichen Stil */
.product {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
}

.product ul {
    padding-left: 0;
    list-style: none;  /* Entfernt die Standard-Liste-Punkte */
}

.product li {
    margin-bottom: 10px;
    padding-left: 0;  /* Einheitliche Ausrichtung der Listenelemente */
}


@media (max-width: 900px) {
    .product-container {
        flex-direction: column; /* Stapelt die Inhalte vertikal */
    }

    .product-images {
		display: flex;
        flex-direction: column; /* Stapelt die großen und kleinen Bilder */
        align-items: center; /* Zentriert die Inhalte */
        margin: 0 auto; /* Zentriert die Bilder auf kleineren Bildschirmen */
    }

    .large-image {
		order: 1; /* Erste Position innerhalb des flex-Containers */
        width: 100%; /* Großes Bild nimmt 100% der Breite ein */
        margin-left: 0; /* Abstand entfernen */
    }

    .small-images {
		order: 2; /* Zweite Position innerhalb des flex-Containers */
        flex-direction: row; /* Kleine Bilder horizontal anordnen */
		flex-wrap: wrap; /* Ermöglicht das Umfließen der Bilder in zwei Zeilen */
        justify-content: center;
        margin-left: 0;
		margin-top: 10px; /* Abstand zwischen großen und kleinen Bildern */
        gap: 10px; /* Abstand beibehalten */
    }

    .small-images img {
        width: 45px; /* Etwas größere Thumbnails für bessere Bedienung */
    }

    .product-details {
        width: 90%; /* Produktdetails nehmen die gesamte Breite ein */
        margin-top: 20px; /* Abstand unterhalb der Bilder */
        padding: 15px; /* Zusätzliche Polsterung für Lesbarkeit */
    }
}

/*Produkt-Übersicht-Stile*/

.filter-sidebar {
    width: 250px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    position: fixed;
    left: -230px;
    top: 114px;
    transition: left 0.3s;
    z-index: 10; /* Über anderen Inhalten */
}

.filter-sidebar.open {
    left: 0;
}

.filter-content {
    display: none;
}

.filter-sidebar.open .filter-content {
    display: block;
}

.filter-sidebar h2 {
    margin-top: 0;
}

.filter-sidebar form {
    display: flex;
    flex-direction: column;
}

.filter-sidebar label {
    margin-top: 10px;
}

.filter-sidebar label:hover {
    transform: scale(1.05); /* Leichter Zoom-Effekt */
}

.filter-sidebar select, .filter-sidebar input, .filter-sidebar button {
    margin-top: 5px;
    padding: 10px;
    font-size: 1em;
}

.filter-sidebar button {
    margin-top: 20px;
    background-color: #59cbe8;
    color: #000;
    border: none;
    cursor: pointer;
	font-family: Relaunch, sans-serif;
}

.filter-sidebar button:hover {
    background-color: #ff6900;
	color: #fff;
}

#Kategorien {
    display: none;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); /* 5 Produkte pro Zeile über 20% der Seite */
    gap: 1em;
    padding: 1em;
    max-width: 100%; /* Maximale Breite der Grid-Container */
    margin: 0 auto; /* Zentriert das Grid horizontal */
	margin-top: 98px;
}

.product {
    border: 1px solid #ccc;
    padding: 1em;
    text-align: center;
    box-sizing: border-box; /* Berücksichtigt die Padding und Border in der Breite */
	color: #fff;
}

.product img:hover {
    transform: scale(1.05); /* Leichter Zoom-Effekt */
}

.product img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); /* 4 Produkte pro Zeile bei kleineren Bildschirmen */
    }
}

@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(33.33%, 1fr)); /* 3 Produkte pro Zeile bei noch kleineren Bildschirmen */
    }
}

.product p {
    margin-top: 10;
}

.filter-content label {
    display: block;
    margin-bottom: 5px;
}

.filter-content input[type="number"] {
    width: 100px;
    margin-bottom: 10px;
}

.range-slider {
    position: relative;
    width: 100%;
    height: 5px;
    margin: 0px 0;
	margin-bottom: 25px;
    background: #ddd;
    border-radius: 5px;
}

.range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff6900;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.slider-track {
    position: absolute;
    height: 5px;
    background: #59cbe8;
    border-radius: 5px;
    z-index: 1;
}

.price-container {
    display: flex;
    gap: 10px; /* Abstand zwischen den Feldern */
    align-items: center; /* Vertikale Ausrichtung */
}

.price-field {
    display: flex;
    flex-direction: column;
}

/*Produkt-Stile*/

.container-3D {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}	

.container-laser {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}	

.container-sublimation {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}	

.hero-3D {
    background-image: url('hero_bg.webp');
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.hero-laser {
    background-image: url('hero_bg.webp');
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.hero-sublimation {
    background-image: url('hero_bg.webp');
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.hero-3D h1 {
    font-size: 3em;
    margin-bottom: 20px;
	color: #59cbe8;
}

.hero-laser h1 {
    font-size: 3em;
    margin-bottom: 20px;
	color: #59cbe8;
}

.hero-sublimation h1 {
    font-size: 3em;
    margin-bottom: 20px;
	color: #59cbe8;
}

.hero-3D p{
	font-size: 1.5em;
	color: #fff;
}

.hero-laser p{
	font-size: 1.5em;
	color: #fff;
}

.hero-sublimation p{
	font-size: 1.5em;
	color: #fff;
}



.facts {
  max-width: 900px;
  margin: auto;
  padding: 2rem;
}

.fact {
  text-align: center;
  padding: 1rem;
}

.fact img {
  margin-top: 1rem;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.fact-buttons {
  text-align: center;
  margin-top: 2rem;
}

.facts h2 {
    text-align: center;
    margin-bottom: 30px;
	color: #ff6900;
}

.facts h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
	color: #ff6900;
}

.facts p {
    font-size: 1.1em;
	color: #fff;
}

.facts p a {
    color: #59cbe8;
}

.facts p a:hover {
    color: #ff6900;
}

/* Stil für den "Produkte-Button */
.button-produkte {
    display: inline-block;
    margin: 0 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #ff6900; /* Hintergrundfarbe */
    color: #fff; /* Textfarbe */
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* Effekt bei Hover für den "Produkte-Button */
.button-produkte:hover {
    background-color: #59cbe8; /* Dunklere Hintergrundfarbe bei Hover */
	color: #000;
}

/* Datenschutz-Stile */
.container_datenschutz {
    margin: 0 auto;
    padding: 30px;
}

.datenschutz {
    padding: 50px 0;
	color: #fff;
}

.datenschutz h2 {
    font-size: 2em;
    margin-bottom: 20px;
	color: #59cbe8;
}

.datenschutz strong {
	color: #ff6900;
}
	
.datenschutz p {
    font-size: 1.1em;
    margin-bottom: 30px;
}

.datenschutz ul {
    list-style-type: none;
    padding: 0;
}

.datenschutz li {
    margin-bottom: 10px;
}

.datenschutz a {
    color: #59cbe8;
    text-decoration: none;
}

.datenschutz a:hover {
    text-decoration: underline;
	color: #ff6900;
}

/* Nutzungsbedingungen-Stile */
.container_nutzung {
    margin: 0 auto;
    padding: 30px;
}

.nutzung {
    padding: 50px 0;
	color: #fff;
}

.nutzung h2 {
    font-size: 2em;
    margin-bottom: 20px;
	color: #59cbe8;
}

.nutzung strong {
	color: #ff6900;
}
	
.nutzung p {
    font-size: 1.1em;
    margin-bottom: 30px;
}

.nutzung ul {
    list-style-type: none;
    padding: 0;
}

.nutzung li {
    margin-bottom: 10px;
}

.nutzung a {
    color: #59cbe8;
    text-decoration: none;
}

.nutzung a:hover {
    text-decoration: underline;
	color: #ff6900;
}

/* Cookie-PopUp-Stile */
.cookie-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('/Bilder/Logo/Logo_animiert.webp') center center / cover no-repeat; /* Transparente GIF-Datei als Hintergrund */
    z-index: 1000;
    text-align: center;
    overflow: auto; /* Falls der Inhalt des Popups länger ist */
}

.cookie-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001; /* Über dem Popup */
}

.cookie-content {
    position: absolute;
    z-index: 1002; /* Über dem Overlay */
    padding: 20px;
    background: url(/Bilder/deutsch.svg) no-repeat center center; /* Hintergrundbild zentrieren */
    background-size: cover; /* Hintergrundbild skaliert auf volle Größe */
    border-radius: 8px;
    width: 600px;
    height: 30vh; /* Höhe auf 35% der Viewport-Höhe setzen */
    margin: 0; /* Entfernt alle Ränder, um korrekte Zentrierung zu gewährleisten */
    top: 1000%; /* Setzt das Element in der vertikalen Mitte */
    left: 50%; /* Setzt das Element in der horizontalen Mitte */
    transform: translate(-50%, -50%); /* Kompensiert die Größe des Elements und sorgt für exakte Zentrierung */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}

.cookie-content p {
	color: #fff;
    text-align: center;
}

.cookie-content a {
	color: #59cbe8;
}

.cookie-content a:hover {
	color: #000;
}

.cookie-content h2 {
	color: #59cbe8;
    margin-top: 140px;
    text-align: center;
}

#accept-cookies {
    background-color: #ff6900;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 1.1em;
    font-family: Relaunch, sans-serif;
}

#accept-cookies:hover {
    background-color: #69CBE8;
	color: #000;
}

/* Cookie-PopUp-Stile_Datenschutz */
.cookie-popup_ds {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    overflow: auto; /* Falls der Inhalt des Popups länger ist */
    margin-top: 100px;
}

.cookie-overlay_ds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001; /* Über dem Popup */
}

.cookie-content_ds {
    position: relative;
    z-index: 1002; /* Über dem Overlay */
    padding: 20px;
    background-color: transparent;
    border-radius: 8px;
    max-width: 400px;
    margin: 150px auto; /* Zentrierung des Popups */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.);
}

.cookie-content_ds p {
	color: #fff;
}

.cookie-content_ds a {
	color: #59cbe8;
}

.cookie-content_ds h2 {
	color: #59cbe8;
}

#accept-cookies_ds {
    background-color: #ff6900;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 3em;
    display: block;
}

#accept-cookies_ds:hover {
    background-color: #59CBE8;
	color: #000;
}

/* FAQ-Stile */
.faq {
	margin: 0 auto;
	color: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;  /* Buttons dehnen sich über die gesamte Breite */
    width: 50%;  /* Container nimmt die volle Breite ein */
    padding: 0 10px; /* Leichtes Padding an den Seiten */
}

.container_faq h2 {
	font-size: 2em;
}

.accordion {
    margin-top: 50px;
}

.accordion_item {
	margin-bottom: 10px;
	border: 1px solid #333;
	border-radius: 5px;
	color: #000;
	background-color: #59cbe8;
}
.accordion_item2 {
	margin-bottom: 10px;
	border: 1px solid #333;
	border-radius: 5px;
	color: #fff;
	background-color: #ff6900;
}
.accordion_toggle {
	padding: 10px;
	cursor: pointer;
}
.accordion_content {
	padding: 10px;
	display: none;
	color: #fff;
}
.accordion_content2 {
	padding: 10px;
	display: none;
	color: #000;
}
.accordion_content a{
	color: #ff6900;
}
.accordion_content2 a{
	color: #59cbe8;
}
.accordion_content.active {
	display: block;
}

/* Sprach-Button-Stile */
#language-popup {
    position: fixed;
    top: 33.3%; /* Zentriert vertikal */
    right: 0; /* Am rechten Rand */
    transform: translateY(-50%); /* Zentriert vertikal */
	width: auto;
	max-width: 150px;
    height: auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Über anderen Inhalten */
    display: none; /* Standardmäßig ausgeblendet */
}

#language-popup img {
    display: block;
    width: 50px;
    height: auto;
    cursor: pointer; /* Zeiger ändern, um Benutzer auf Interaktivität hinzuweisen */
}

#language-popup img:hover {
    transform: scale(2); /* Leichter Zoom-Effekt */
}

/* Customize Sektion Stile*/
#controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

#canvas-container {
    position: relative;
    border: 1px solid #333;
}

canvas {
    border: 1px solid #ccc;
}

/* Zusätzliche Styles für die Platzhalterseite */
.under-construction {
    margin: 0;
    padding: 100px 0;
    display: flex;
    flex-direction: column; /* Vertikale Anordnung der Elemente */
    justify-content: center;
    align-items: center;
    height: 113vh;
    background-color: #333; /* Beispielhintergrund, anpassbar */
    color: #fff;
    text-align: center;
}

.under-construction .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.under-construction h1 {
    font-size: 3em;
    margin-bottom: 20px;
	color: #59cbe8;
    margin-top: 100px;
}

.under-construction p {
	font-size: 1.5em;
	color: #fff;
}

.under-construction img {
	width: 100%; /* Bild passt sich der Bildschirmbreite an */
    max-width: 1200px; /* Maximale Breite auf 1200px beschränken */
    height: auto; /* Seitenverhältnis bleibt erhalten */
    margin-top: 20px; /* Abstand nach oben */
}

.under-construction h1 strong{
    color: #ff6900;
    font-size: 3.5em;
}

.under-construction a strong{
    color: #ff6900;
}

.under-construction a strong:hover{
    color: #59cbe8;
}

.under-construction p a{
    color: #ff6900;
}

.under-construction p a:hover{
    color: #59cbe8;
}

/*Handy-Menü Stile*/

.menu-btn {
    display: none;
    flex-direction: column;
    cursor: pointer;
}
.menu-btn span {
    height: 3px;
    width: 25px;
    background-color: black;
    margin: 4px 0;
    transition: 0.3s;
}
.menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    z-index: 100;
}
.menu.show {
    display: flex;
}
.menu a {
    padding: 10px 20px;
    text-decoration: none;
    color: black;
    border-bottom: 1px solid #ddd;
}
.menu a:last-child {
    border-bottom: none;
}
.desktop-menu {
    display: flex;
    gap: 20px;
}
@media (max-width: 939px) {
    .menu-btn {
        display: flex;
    }
    .desktop-menu {
        display: none;
    }
	.logo
	.logo-button:not(#logo_Smartphone), 
    .buy-button {
        display: none;
    }
    .logo_Smartphone {
        display: flex;
    }	
}

@media (min-width: 940px) {
    .logo_Smartphone {
        display: none;
    }	
}

@media (max-width: 600px) {
	.menu-btn {
        display: flex;
    }
	.logo_Smartphone {
        display: flex;
    }
}

.menu-container-phone {
    display: flex;
    flex-direction: column;
    align-items: stretch;  /* Buttons dehnen sich über die gesamte Breite */
    width: 95%;  /* Container nimmt die volle Breite ein */
    max-width: 100vw;  /* Maximale Breite auf die Viewport-Breite setzen */
    padding: 0 10px; /* Leichtes Padding an den Seiten */
}

.menu-button-phone {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;  /* Buttons nehmen die volle Breite des Containers ein */
    height: 63px;
    margin: 5px 0;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-sizing: border-box; /* Stellt sicher, dass Padding/Borderränder die Gesamtbreite nicht beeinflussen */
}

.menu-button-phone:nth-child(odd) {
    background-color: #59cbe8;
    color: black;
	font-family: Relaunch, sans-serif;
	border-radius: 8px; /* Abgerundete Ecken */
}

.menu-button-phone:nth-child(even) {
    background-color: #ff6900;
    color: white;
	font-family: Relaunch, sans-serif;
	border-radius: 8px; /* Abgerundete Ecken */
}

.menu-button-phone:hover {
    transform: scale(1.05); /* Leichter Zoom-Effekt */
}

/* Rücke den obersten Button um 100px nach unten */
.menu-button-phone:first-child {
    margin-top: 100px;
}

/* Stile für die letzte Zeile */
.menu-button-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 5px; /* Abstand zwischen den drei Buttons */
    margin-top: 10px;
    aspect-ratio: 5 / 1; /* Höhe entspricht der Breite (quadratisch) */
}

/* Buttons in der letzten Zeile */
.menu-button-phone.sub-button {
    flex: 1; /* Jeder Button nimmt den gleichen Platz ein */
    display: flex;
    flex-direction: column; /* Ermöglicht Bild und Text untereinander */
    align-items: center;
    justify-content: center;
    height: auto; /* Ermöglicht flexible Höhe durch Inhalt */
    gap: 5px; /* Abstand zwischen Bild und Text */
    text-align: center;
	background-color: transparent; /* Transparenten Hintergrund festlegen */
	color: white; /* Textfarbe */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Bilder innerhalb der letzten Buttons */
.menu-button-phone.sub-button img {
    max-width: 80%; /* Bilder füllen 80% der Breite des Buttons */
    max-height: 80%; /* Bilder nehmen max. 50% der Höhe ein */
    object-fit: contain; /* Skaliert die Bilder ohne Verzerrung */
}

/* Text innerhalb der letzten Buttons */
.menu-button-phone.sub-button span {
    font-size: 20px;
    font-weight: bold;
}

/* Individuelle Gestaltung des ersten Buttons */
.menu-button-phone.sub-button:nth-child(1) {
    background-color: transparent; /* Z.B. transparenter Hintergrund für den ersten Button */
	color: #59cbe8; /* Textfarbe */
    margin-top: 4px; /* Verschiebung des ersten Buttons nach oben */
    margin-left: -15px;
}

/* Individuelle Gestaltung des zweiten Buttons */
.menu-button-phone.sub-button:nth-child(2) {
    background-color: transparent; /* Beispiel: orange Hintergrundfarbe */
    color: #71442a; /* Textfarbe anpassen */
}

/* Individuelle Gestaltung des dritten Buttons */
.menu-button-phone.sub-button:nth-child(3) {
    background-color: transparent; /* Beispiel: blauer Hintergrund */
    color: #e869cb; /* Textfarbe */
    margin-right: 5px;
}

/*Motiv-Übersicht-Stile*/

.motives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Flexible Spalten */
    gap: 1em;
    padding: 1em;
    max-width: 100%;
    margin: 98px auto 0 auto;
    box-sizing: border-box;
}

.motives {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    padding: 0.5em;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f9f9f9;
    aspect-ratio: 1 / 1; /* optional, für gleichmäßige Quadrate */
}

.motives img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.2s ease;
}

.motives img:hover {
    transform: scale(1.02);
}

@media (max-width: 1200px) {
    .motives-grid {
        grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); /* 4 Produkte pro Zeile bei kleineren Bildschirmen */
    }
}

@media (max-width: 900px) {
    .motives-grid {
        grid-template-columns: repeat(auto-fill, minmax(33.33%, 1fr)); /* 3 Produkte pro Zeile bei noch kleineren Bildschirmen */
    }
}

.motives p {
    margin: 0;
}

/*Sprachauswahl-PopUp-Stile */

/* Popup-Hauptcontainer */
.sprachauswahl-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('/Bilder/Logo/Logo_animiert.webp') center center / cover no-repeat; /* Transparente GIF-Datei als Hintergrund */
    z-index: 1000;
    text-align: center;
    overflow: auto; /* Ermöglicht Scrollen bei Überlauf */
}

/* Overlay (falls du einen dunklen Effekt nutzen willst) */
.sprachauswahl-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Halbtransparenter Hintergrund */
    z-index: 1001; /* Über dem Popup-Hintergrund */
}

/* Popup-Inhalt */
.sprachauswahl-content {
    position: relative;
    z-index: 1002; /* Über dem Overlay */
    padding: 20px;
    background-color: transparent; /* Dunkler Hintergrund für den Inhalt */
    border-radius: 8px;
    margin: 100px auto; /* Zentrierung */
    max-width: 500px; /* Maximale Breite für den Inhalt */
}

/* Allgemeine Stile für Texte */
.sprachauswahl-content p,
.sprachauswahl-content h2 {
    color: #fff; /* Weißer Text */
}

.sprachauswahl-content a {
    color: #59cbe8; /* Helles Blau für Links */
    text-decoration: none; /* Keine Unterstreichung */
}

/* Individuelle Buttons */
#sprachauswahl {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Buttons untereinander */
    gap: 730px; /* Abstand zwischen den Buttons */
    margin-top: -25px
}

#sprachauswahl a {
    display: flex; /* Ermöglicht Zentrierung von Text */
    justify-content: center; /* Zentriert den Text horizontal */
    align-items: flex-end; /* Zentriert den Text vertikal */
    width: 319px; /* Breite der Buttons */
    height: 213px; /* Höhe der Buttons */
    font-size: 1.1em;
    font-family: Relaunch, sans-serif;
    text-align: center;
    border: none;
    border-radius: 5px;
    background-size: cover; /* Hintergrundbild vollständig anzeigen */
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    text-decoration: none; /* Entfernt die Standardunterstreichung von Links */
    position: relative; /* Für Positionierung des Textes */
}

/* Button 1 mit Dialekt-Bild */
#sprachauswahl-button1 {
    background-image: url('/Bilder/dialekt.webp');
    color: #fff;
}

#sprachauswahl-button1:hover {
    color: #ff6900; /* Orange beim Hover */
    transform: scale(1.05); /* Leichter Zoom-Effekt */
}

#sprachauswahl-button1 span {
    position: relative;
    z-index: 2; /* Text bleibt über dem Hintergrund */
    padding: 3px;
    border-radius: 5px;
}

/* Button 2 mit Hochdeutsch-Bild */
#sprachauswahl-button2 {
    background-image: url('/Bilder/deutsch.svg');
    color: #000;
}

#sprachauswahl-button2:hover {
    color: #59cbe8; /* Blau beim Hover */
    transform: scale(1.05); /* Leichter Zoom-Effekt */
}

#sprachauswahl-button2 span {
    position: relative;
    z-index: 2; /* Text bleibt über dem Hintergrund */
    padding: 15px;
    border-radius: 5px;
}

#sprachauswahl-button1,
#sprachauswahl-button2 {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Cookie-Popup */
#cookie-popup_sprache {
    display: none;  /* Popup anfangs nicht sichtbar */
    position: fixed;
    z-index: 1000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0);
    width: 300px;  /* Oder eine relative Breite, falls gewünscht */
    background-color: transparent;
    text-align: center;
    transition: all 0.3s ease-in-out; /* Optional für Animation */
}

/* Overlay für die Cookie-Akzeptanz */
.cookie-overlay_sprache {
    display: none;  /* Overlay anfangs unsichtbar */
    position: fixed;
    margin-top: -50vh;
    margin-left: -100vh;
    top: 0;
    left: 0;
    width: 200vh;  /* Setzt die Breite auf die gesamte Viewport-Breite */
    height: 110vh;  /* Setzt die Höhe auf die gesamte Viewport-Höhe */
    background-color: rgba(0, 0, 0, 0.3);  /* Semi-transparenter Hintergrund */
    z-index: 999;
}

#cookie-popup_sprache_dialekt {
    display: none;  /* Popup anfangs nicht sichtbar */
    position: fixed;
    z-index: 1000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0);
    width: 300px;  /* Oder eine relative Breite, falls gewünscht */
    background-color: transparent;
    text-align: center;
    transition: all 0.3s ease-in-out; /* Optional für Animation */
}

/* Overlay für die Cookie-Akzeptanz */
.cookie-overlay_sprache_dialekt {
    display: none;  /* Overlay anfangs unsichtbar */
    position: fixed;
    margin-top: -50vh;
    margin-left: -100vh;
    top: 0;
    left: 0;
    width: 200vh;  /* Setzt die Breite auf die gesamte Viewport-Breite */
    height: 110vh;  /* Setzt die Höhe auf die gesamte Viewport-Höhe */
    background-color: rgba(0, 0, 0, 0.3);  /* Semi-transparenter Hintergrund */
    z-index: 999;
}

.cookie-content_dialekt {
    position: absolute;
    z-index: 1002; /* Über dem Overlay */
    padding: 20px;
    background: url(/Bilder/dialekt.webp) no-repeat center center; /* Hintergrundbild zentrieren */
    background-size: cover; /* Hintergrundbild skaliert auf volle Größe */
    border-radius: 8px;
    width: 600px;
    height: 30vh; /* Höhe auf 35% der Viewport-Höhe setzen */
    margin: 0; /* Entfernt alle Ränder, um korrekte Zentrierung zu gewährleisten */
    bottom: 1%; /* Setzt das Element in der vertikalen Mitte */
    left: 50%; /* Setzt das Element in der horizontalen Mitte */
    transform: translate(-50%, -50%); /* Kompensiert die Größe des Elements und sorgt für exakte Zentrierung */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}
.cookie-content_dialekt p {
	color: #fff;
    text-align: center;
    margin-top: 320px;
    margin-bottom: 3px;
}

.cookie-content_dialekt a {
	color: #59cbe8;
}

.cookie-content_dialekt a:hover {
	color: #ff6900;
}

.cookie-content_dialekt h2 {
	color: #59cbe8;
    margin-top: -8px;
    text-align: center;
}

#accept-cookies_dialekt {
    background-color: #ff6900;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 1.1em;
    font-family: Relaunch, sans-serif;
}

#accept-cookies_dialekt:hover {
    background-color: #59CBE8;
	color: #000;
}

.Warenkorb-komplett {
    margin: 0 auto;
    width: 50%;
}

.warenkorb_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-top: 100px;
    color: #fff;
    margin-bottom: 50px;
}

.warenkorb_container strong {
    margin-left: 10px;
    color: #59cbe8;
}

.warenkorb_container p {
    color: #fff;
    position: relative;
    top: 5px;
    left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.warenkorb_container h1 {
    margin-left: 10px;
    color: #ff6900;
    margin-bottom: -20px;
}

.warenkorb_container button {
    position: relative;
    margin-left: 80px;
    margin-bottom: -10px;
    margin-top: -33px;
    margin-right: 0px;
}

/* Checkbox-Stil */
.agb-warenkorb {
    display: block;
}

#agb {
    width: 20px; /* Größe der Checkbox */
    height: 20px;
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    accent-color: #ff6900; /* Ändert die Farbe der Checkbox (für moderne Browser) */
    vertical-align: middle; /* Optional: Zentriert die Checkbox zum Text */
    margin-left: 10px;
}

/* Label-Stil */
label[for="agb"] {
    font-size: 18px; /* Textgröße */
    color: #59cbe8; /* Textfarbe */
    margin-left: 0px; /* Abstand zur Checkbox */
    cursor: pointer; /* Zeigt an, dass das Label klickbar ist */
    vertical-align: middle; /* Optional: Zentriert die Checkbox zum Text */
}

/* Stil für den Link innerhalb des Labels */
label[for="agb"] a {
    color: #ff6900; /* Linkfarbe */
    text-decoration: underline; /* Unterstreichung entfernen */
}

label[for="agb"] a:hover {
    text-decoration: underline; /* Unterstreichung bei Hover */
    color: #59cbe8; /* Farbe ändern bei Hover */
}

.container-item {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 20px
}

.container-item button {
    padding: 8px 14px;
    border: none;
    cursor: pointer;
}

.container-item .name {
    color: #59cbe8;
    font-size: 24px;
}

.container-item .farbauswahl {
    color: #ff6900;
    font-size: 24px;
}

.container-item .quantity {
    font-size: 20px;
}

.container-item .price {
    font-size: 20px;
}

.container-item p {
    font-size: 20px;
}

.container-item a {
    color: #ff6900;
    font-size: 20px;
}

#download-pdf {
    margin-left: 10px;
}

#bestell-button {
    margin-left: 10px;
}

#warenkorb-contents {
    margin-top: 10px;
}

#warenkorb-contents .empty {
    color: 333;
}

#Warenkorb-Button {
    background-color: #ff6900;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 20px;
	font-family: Relaunch, sans-serif;
    transition: background-color 0.3s ease;
    margin-right: 15px;
    margin-bottom: 15px;
    display: inline-block;
}

#Warenkorb-Button:hover {
    background-color: #59cbe8;
    color: #000;
}

/* Mini-Warenkorb-Button-Stile */
#Warenkorb-popup {
    position: fixed;
    top: 17.8%; /* Zentriert vertikal */
    right: 0; /* Am rechten Rand */
    transform: translateY(-50%); /* Zentriert vertikal */
	width: auto;
	max-width: 150px;
    height: auto;
    background-color: transparent;
    z-index: 1000; /* Über anderen Inhalten */
    display: none; /* Standardmäßig ausgeblendet */
    margin-right: 5px;
}

#Warenkorb-popup img {
    display: block;
    width: 50px;
    height: auto;
    cursor: pointer; /* Zeiger ändern, um Benutzer auf Interaktivität hinzuweisen */
}

#Warenkorb-popup img:hover {
    transform: scale(1.1); /* Leichter Zoom-Effekt */
}

@media screen and (max-width: 939px) {
    #sprachauswahl{
        margin-top: -115px;
        gap: 300px;
    }
    .cookie-content {
        width: 400px;
        top: 100%; /* Setzt das Element in der vertikalen Mitte */
    }
    .cookie-content h2 {
        margin-top: 12px;
        font-size: 2em;
    }
    .cookie-content p {
        margin-bottom: 29px;
    }
    .cookie-content_dialekt {
        width: 400px;
        bottom: -100%; /* Setzt das Element in der vertikalen Mitte */
    }
    .cookie-content_dialekt p {
        color: #fff;
        text-align: center;
        margin-top: 190px;
        margin-bottom: 3px;
        font-size: 0.8em;
    }
    .cookie-content_dialekt h2 {
        margin-top: -17px;
        font-size: 2em;
    }
    .container-item a {
        color: #ff6900;
        font-size: 10px;
    }
    .footer-bottom {
        width: 95%;
    }
    .faq {
        width: 95%;  /* Container nimmt die volle Breite ein */
    }
    video-background {
        height: auto; /* Ermöglicht flexibles Verhalten bei kleineren Bildschirmen */
    }

    .video-background video {
        object-fit: contain; /* Passt das Video an, ohne es zuzuschneiden */
        width: 100%;
        height: auto; /* Höhe proportional zur Breite anpassen */
        margin-top: 100px;        
    }
    .video-text {
        display: block; /* Nur auf Handys sichtbar */
    }
    .hero {
        height: 75vh;
    }
    .hero-content {
        margin-top: 205px;
    }
    #language-popup {
        top: 35%; /* Zentriert vertikal */
    }
    .container-impressum {
        margin-top: 50px;
    }
    #accept-cookies_ds {
        font-size: 1.8em;
        margin-top: 333px;
    }
    .under-construction h1 {
        font-size: 2.5em;
        margin-bottom: 0px;
        margin-top: 105px;
    }
    .container_datenschutz {
        padding: 20px;
    }
    .container_nutzung {
        padding: 20px;
    }
    .container_AGB {
        padding: 20px;
    }
    .Warenkorb-komplett {
    margin: 0 auto;
    width: 100%;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1921px){
    #sprachauswahl{
        margin-top: -45px;
        gap: 388px;
    }
    .cookie-content {
        width: 500px;
        top: 700%; /* Setzt das Element in der vertikalen Mitte */
    }
    .cookie-content h2 {
        margin-top: 12px;
        font-size: 2em;
        margin-bottom: 65px;
    }
    .cookie-content p {
        margin-bottom: 62px;
    }
    .cookie-content_dialekt {
        width: 500px;
        bottom: -100%; /* Setzt das Element in der vertikalen Mitte */
    }
    .cookie-content_dialekt p {
        color: #fff;
        text-align: center;
        margin-top: 210px;
        margin-bottom: 3px;
        font-size: 0.8em;
    }
    .cookie-content_dialekt h2 {
        margin-top: -17px;
        font-size: 2em;
    }
    .footer-bottom {
        width: 98.85%;
    }
    .video-background video {
        margin-top: 100px;        
    }
    .under-construction h1 {
        margin-top: 100px;
    }
    .under-construction{
        height: 1500px;
    }
}

/* Mute-Button-Stile */
/* Pop-Up-Stil */
.mute-popup {
    position: fixed;
    top: 24.1%;
    right: 0px;
    background-color: rgba(0, 0, 0, 0);
    padding: 0px;
    border-radius: 8px;
    z-index: 1000;
}

/* Button im Pop-Up */
#mute-button {
    background: none;
    border: none;
    cursor: pointer;
}

#mute-img {
    width: 40px; /* Größe des Symbols */
    height: 40px;
}

#mute-button img:hover {
    transform: scale(1.1); /* Leichter Zoom-Effekt */
}

.hidden-option {
    display: none;
}

/* Warenkorb-Icon Styling */
#warenkorb-icon {
    position: fixed; /* Fixiert das Icon auf dem Bildschirm */
    top: 0px; 
    right: 0px;
    font-size: 24px; 
    cursor: pointer;
    background: transparent;
    padding: 10px;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

/* Hover-Effekt für das Warenkorb-Icon */
#warenkorb-icon:hover {
    transform: scale(1.1);
}

/* Warenkorb-Zähler Styling */
#warenkorb-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff6900;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 4px 7px;
    border-radius: 50%;
    display: none; /* Standardmäßig ausblenden */
}

/* Animation: Warenkorb-Icon kurz vergrößern */
@keyframes scaleUp {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); } /* Kurz auf 130% Größe wachsen */
    100% { transform: scale(1); }
}

.scale-up {
    animation: scaleUp 0.3s ease-in-out;
}

/* Stil für die Benachrichtigung */
#warenkorb-meldung {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #59cbe8;
    color: #000000;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#warenkorb-meldung.show {
    opacity: 1;
}

.hidden {
    display: none;
}

#lieferzeit-hinweis {
    color: #59cbe8;
	font-size: 14px;
	margin-top: -12px
}

/* From Uiverse.io by Yashasewi */ 
.papageibutton {
  background: #ff6900;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  font: 18px "Relaunch", sans-serif;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in-out;
  letter-spacing: 2px;
  margin-left: 120px;
  margin-top: 14px;
  margin-bottom: 0px;
}

.papageibutton:hover {
  background: #59cbe8;
  color: #000;
  scale: 1.05;
}

.button-parrot .parrot, 
.button-parrot2 .parrot {

  position: absolute;
  width: 60px;
  text-align: center;
  animation: blink 0.8s infinite;
  color: transparent;
}

.button-parrot .parrot:before {
  content: "Kauf mich!";
}

.button-parrot2 .parrot:before {
  content: "ohje...";
}

.button-parrot .parrot:nth-child(1),
.button-parrot2 .parrot:nth-child(1) {
  top: -15px;
  left: -45px;
  font: 12px/1 "Relaunch", sans-serif;
  transform: rotate(-20deg);
  animation-duration: 0.5s;
}

.button-parrot .parrot:nth-child(2),
.button-parrot2 .parrot:nth-child(2) {
  font: 12px/1 "Relaunch", sans-serif;
  right: -40px;
  top: -20px;
  transform: rotate(15deg);
  animation-duration: 0.3s;
}

.button-parrot .parrot:nth-child(3),
.button-parrot2 .parrot:nth-child(3) {
  font: 16px/1 "Relaunch", sans-serif;
  top: -70px;
  left: 15px;
  transform: rotate(10deg);
  animation-duration: 1s;
}

.button-parrot .parrot:nth-child(4),
.button-parrot2 .parrot:nth-child(4) {
  font: 18px/1 "Relaunch", sans-serif;
  top: -70px;
  left: 105px;
  transform: rotate(2deg);
  animation-duration: 0.7s;
}

.button-parrot .parrot:nth-child(5),
.button-parrot2 .parrot:nth-child(5) {
  font: 14px/1 "Relaunch", sans-serif;
  top: 60px;
  left: 135px;
  transform: rotate(-20deg);
  animation-duration: 0.8s;
}

.button-parrot .parrot:nth-child(6),
.button-parrot2 .parrot:nth-child(6) {
  font: 12px/1 "Relaunch", sans-serif;
  top: 60px;
  left: 5px;
  transform: rotate(10deg);
  animation-duration: 1.2s;
}

.button-parrot button:hover .parrot:before {
  content: "Tu es!";
  width: 70px;
}

.button-parrot2 button:hover .parrot:before {
  content: "Frag nach!";
  width: 70px;
}

@keyframes blink {
  25%, 75% {
    color: transparent;
  }

  40%, 60% {
    color: #59cbe8;
  }
}

.dropdown-wrapper {
  position: relative;
}

.dropdown {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  background: transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  border-radius: 0 0 12px 12px;
  border-top: 3px solid #ff6900;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all 300ms ease;
  z-index: 999;
}

.dropdown a {
  padding: 12px 18px;
  display: block;
  color: #fff;
  text-decoration: none;
  background-color: #444;
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
}

.dropdown a:hover {
  background-color: #59cbe8;
  color: #000;
  border-left: 4px solid #ff6900;
}

.dropdown a.active {
  background-color: #59cbe8;
  color: #000;
  border-left: 4px solid #ff6900;
}

.dropdown a.active:hover {
  background-color: #ff6900;
  color: #fff;
  border-left: 4px solid #59cbe8;
}

/* Aktivierung beim Hover */
.dropdown-wrapper:hover .dropdown,
.dropdown:hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Sub-Dropdown */
.dropdown-item {
  position: relative;
}

.sub-dropdown {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: transparent;
  padding-left: 6px;
  min-width: 200px;
  z-index: 1000;
}

.sub-dropdown a {
  background-color: #444;
  color: #fff;
  margin: 0px 0;
}

.sub-dropdown a:hover {
  background-color: #59cbe8;
  color: #000;
  border-left: 4px solid #ff6900;
}

.dropdown-item:hover .sub-dropdown {
  display: flex;
  flex-direction: column;
}

.technische-daten h2 {
    margin-top: 20px;
	color: #ff6900;
}

.technische-daten table {
    width: 95%;
    border-collapse: collapse;
    margin-top: 1rem;
	margin-left: 0;
	text-align: left;
	width: auto;
}

.technische-daten td {
    padding: 0.5rem;
    border: none;
}

.technische-daten td:first-child {
    font-weight: bold;
    width: 40%;
    color: #59cbe8;
    text-align: right;
}

/* Farbfilter */
.farbvarianten-wrapper {
    margin-top: 2rem;
}

.farbvarianten {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    align-items: center;
}

.farbkreis {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.farbkreis:hover {
    transform: scale(1.1);
}

.farbkreis.aktiv {
    border: 4px solid #59cbe8; /* spricht deinen Wunsch nach dunkler Umrandung */
}

.farbkreis.aktiv::after {
    /* Dünner innerer Ring aus gleicher Farbe wie Hintergrund */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    transform: translate(-50%, -50%);
	
}

/* inaktiv bleibt mit Kreuz-Darstellung */
.farbkreis.inaktiv .kreuz {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.farbkreis.inaktiv .kreuz::before,
.farbkreis.inaktiv .kreuz::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #333;
    top: 47%;
    left: 0;
    transform-origin: center;
}

.farbkreis.inaktiv .kreuz::before {
    transform: rotate(45deg);
}

.farbkreis.inaktiv .kreuz::after {
    transform: rotate(-45deg);
}

.produkt-features h2 {
	color: #ff6900;
}

.produkt-features ul {
    list-style: disc inside;
    padding-left: 1rem;
    margin: 0.5rem 0 1.5rem;
}

.produkt-seo-text p {
    line-height: 1.6;
    font-size: 0.95rem;
    margin-top: 1rem;
}

.zuletzt-angesehen-wrapper {
    margin-top: 3rem;
    position: relative;
}

.zuletzt-angesehen-wrapper h2 {
    text-align: center;
    margin-bottom: 1rem;
    color: #ff6900;
}

.glide__slide a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem;
}

.glide__slide img {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 0 6px #0003;
}

.glide__slide span {
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.2;
	color: #59cbe8;
}

.glide__arrows {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-between;
    pointer-events: none;
}

.glide-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.glide__track {
    flex-grow: 1;
    max-width: 100%;
    overflow: hidden;
}

.glide__arrow {
    background: none;
    border: none;
    font-size: 2rem;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: center;
    color: #ff6900;
}

.glide__arrow:hover {
    color: #59cbe8;
}

.slider-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: flex-start;
}

.slider-grid-wrapper section {
    flex: 1 1 48%;
    min-width: 300px;
}


@media (max-width: 768px) {
    .glide__arrow {
        font-size: 1.5rem;
    }
    .glide__track {
		max-width: 85%;
	}
}

.motiv-auswaehlen-button {
    background-color: #59cbe8;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.3s;
}

.motiv-auswaehlen-button:hover {
    background-color: #36b3d3;
}

#warenkorb-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background-color: #fff;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#warenkorb-sidebar.active {
    transform: translateX(0);
}

#warenkorb-sidebar .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background: #59cbe8;
    color: #fff;
    font-size: 1.2em;
}

#warenkorb-sidebar .sidebar-footer {
    padding: 1em;
    border-top: 1px solid #ddd;
}

#warenkorb-sidebar .checkout-button {
    width: 100%;
    padding: 0.8em;
    background-color: #ff6900;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

#warenkorb-sidebar .produkt {
    padding: 1em;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 0.8em;
    align-items: center;
}

#warenkorb-sidebar .produkt img {
    width: 50px;
    height: auto;
    object-fit: contain;
}

/* Standard: normale Tabelle für Desktop */
.warenkorb-tabelle {
  width: 95%;
  border-collapse: collapse;
	padding-left: 8px;
	margin-bottom: 65px;
}
.warenkorb-tabelle th,
.warenkorb-tabelle td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.menge-input {
  width: 45px;        /* schmaler */
  height: 38px;       /* höher */
  padding: 0;
  text-align: center; /* Zahl mittig */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: Relaunch, sans-serif;
}

/* Mobile-Ansicht */
@media (max-width: 768px) {
  .warenkorb-tabelle,
  .warenkorb-tabelle thead,
  .warenkorb-tabelle tbody,
  .warenkorb-tabelle th,
  .warenkorb-tabelle td,
  .warenkorb-tabelle tr {
    display: block;
    width: 90%;
  }

  /* Tabellenkopf ausblenden */
  .warenkorb-tabelle thead {
    display: none;
  }

  /* Jede Tabellenzeile wird zu einer Card */
  .warenkorb-tabelle tr {
	position: relative;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 10px;
    background: #555;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  /* Jede Zelle blockweise untereinander */
  .warenkorb-tabelle td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
	font-size: 1.1em;
  }

  /* Labels vor die Inhalte setzen */
  .warenkorb-tabelle td::before {
    content: attr(data-label);
    font-weight: bold;
    flex: 1;
    margin-right: 10px;
  }

  /* Werte rechtsbündig */
  .warenkorb-tabelle td {
    flex: 2;
    text-align: right;
  }

  /* Bildzelle etwas anders */
  .warenkorb-tabelle td:first-child {
    justify-content: center;
  }
  .warenkorb-tabelle td::before {
    content: "";
  }
    
  .warenkorb-tabelle td[data-label="Artikel"] {
    flex-direction: column;
    align-items: flex-end; /* linksbündig */
  }

  .warenkorb-tabelle td[data-label="Artikel"] small {
    margin-top: 2px;
    display: block;
  }
	
.menge-input::-webkit-inner-spin-button,
.menge-input::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Chrome/Safari ohne Spinner */
  margin: 0;
}
	
.menge-input {
  width: 38px;        /* schmaler */
  height: 38px;       /* höher */
  -moz-appearance: textfield; /* Firefox ohne Spinner */
  margin-right: 100px;
  font-family: Relaunch, sans-serif;
}
	
.warenkorb-tabelle td.einzelpreis::before {
  content: "zu je ";
  font-weight: normal;
  margin-right: 3px;
}
	
  .einzelpreis {
    margin-top: -44px;
  }
	
  .gesamtpreis {
    font-weight: bold;
  }
	
/* Entfernen-Button oben rechts */
  .warenkorb-tabelle .entfernen-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }

  .warenkorb-tabelle .entfernen-button:hover {
    color: #ff6900; /* kleine Hover-Farbe */
  }
	
.checkout-form {
  width: 80%;
}
	
}

main h1 {
    margin-left: 10px;
    color: #ff6900;
    margin-top: -20px;
}

@media (max-width: 300px) {
    .warenkorb-tabelle td.einzelpreis::before {
      content: "á";
      font-weight: normal;
      margin-right: 1px;
    }
}

input
{
    font-family: Relaunch, sans-serif;
}

textarea
{
    font-family: Relaunch, sans-serif;
}

.checkout-form {
  max-width: 800px;
}

.form-row {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

/* Name + Vorname (2 Spalten) */
.form-row:nth-child(6) {
  grid-template-columns: 1fr 1fr;
}

/* PLZ + Ort (2 Spalten) */
.form-row:nth-child(2) {
  grid-template-columns: 2fr 5fr;
}

/* Email + Tel (2 Spalten) */
.form-row:nth-child(8) {
  grid-template-columns: 1fr 1fr;
}

.checkout-form input,
.checkout-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  box-sizing: border-box;
}

.checkout-form textarea {
  resize: vertical;
  min-height: 50px;
}

.cookie-banner {
  position: fixed;
  bottom: 17px;
  right: 17px;
  z-index: 10000;
  display: none;
}

.pixel-container {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.pixel-wrapper {
  position: relative;
}

.pixel-img {
  width: 80px;
  height: auto;
  cursor: pointer;
}

.pixel-reaction {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid #ff6900;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10001;
}

.pixel-reaction.visible {
  opacity: 1;
}

.speech-bubble {
  position: relative;
  background: #fff;
  border: 2px solid #59cbe8;
  border-radius: 15px;
  padding: 15px;
  max-width: 280px;
  font-size: 14px;
  color: #000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: -15px;
  bottom: 20px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-right-color: #fff;
  filter: drop-shadow(-2px 2px 2px rgba(0,0,0,0.1));
}

/* Pixel-Zittern */
.pixel-img.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-2deg); }
  20% { transform: translate(-3px, 0px) rotate(2deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(2deg); }
  50% { transform: translate(-1px, 2px) rotate(-2deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-2deg); }
  80% { transform: translate(-1px, -1px) rotate(2deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-2deg); }
}

.cookie-buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.cookie-buttons button {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s;
}

#accept-necessary {
  background: #eee;
  color: #000;
}

#accept-necessary:hover {
  background: #ddd;
}

#accept-all {
  background: #59cbe8;
  color: #fff;
}

#accept-all:hover {
  background: #46aacc;
}

.hero-content h1 { font-size: 3rem; line-height: 1.2; color: #ddd;}
.hero-content .highlight { color: #59cbe8; }
.hero-buttons { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn { padding: 0.8rem 1.6rem; border-radius: 30px; font-weight: 600; text-decoration: none; }
.btn-primary { background: #ff6900; color: #fff; }
.btn-secondary { background: transparent; border: 2px solid #59cbe8; color: #59cbe8; }
.btn-primary:hover { background: #ff8833; }
.btn-secondary:hover { background: #59cbe8; color: #fff; }

.gestalten-section { background: #ddd; padding: 4rem 2rem; text-align: center; }
.gestalten-content p { max-width: 600px; margin: 0 auto 1rem; }

.lifestyle-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1rem; margin: 2rem 0; }
.lifestyle-grid img { width: 100%; border-radius: 10px; transition: transform 0.3s; }
.lifestyle-grid img:hover { transform: scale(1.05); }

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1.5rem; margin-top: 2rem; }
.testimonial { background: #ddd; padding: 1.5rem; border-radius: 10px; font-style: italic; }
.testimonial span { display: block; margin-top: 0.5rem; font-weight: 600; color: #ff6900; }

.uebermindprint-teaser { background: #ddd; padding: 2rem; font-size: 1.1rem; text-align: center; }
.uebermindprint-teaser a { color: #59cbe8; text-decoration: none; font-weight: 600; }
.uebermindprint-teaser a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .hero-content h1 { font-size: 2rem; }
    section { padding: 3rem 1rem; }
}

.sternzeichen-section {
    text-align: center;
    padding: 4rem 1.5rem;
}

#sternzeichen-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    transition: color 0.6s ease;
}

#sternzeichen-text {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #555;
}