/* Global Styles */
:root {

    /* Schriftart */
    --main-font: 'Open Sans', sans-serif;

    /*Allgemeine Elemente */
    --h2: #025aa5;
    --h3: #025aa5;
    --button: #fff;
    --buttonHover: #fff;
    --button_hintergrund: #025aa5;
    --button_hintergrundHover: #0077b5;
    --footer: #fff;
    --footerHover: #0077b5;
    --footer_hintergrund: #025aa5;
}

/* ================================================================================================================================================================  */
/* Desktop Styles – nach HTML-Dateien oder Komponenten gegliedert      */
/* ================================================================================================================================================================  */

/* ================================================================================================================================================================ */
/* Allgemeine Styles                                                                                                                                                */
/* ================================================================================================================================================================ */
/* #region AllgemeineStyles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    font-family: var(--main-font);
    /*font-family: 'Open Sans', sans-serif;
    font-weight: 300; /* Light */
}

/*Dummy*/


.dummy {
    display: none;
}


/* Container Styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Header Styles */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #ccc;
}


/* === Farben für allgemeine Elemente */
h2 {
    color: var(--h2);
}

h3 {
    color: var(--h3);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

button {
    color: var(--button);
    background-color: var(--button_hintergrund);

}

button:hover {
    color: var(--buttonHover);
    color: var(--button_hintergrundHover);
}

.product-btn {
    background-color: #fff;
    border: none;

}

.password-wrapper {
    position: relative;
    display: inline-block;
}

.password-wrapper input {
    padding-right: 2rem;
}

.password-wrapper .toggle-password {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    cursor: pointer;
}


/* #endregion */

/* ================================================================================================================================================================ */
/* Abweichender Style für das main-Tag                                                                                                                              */
/* ================================================================================================================================================================ */
/* #region MainTagAbweichend */
.orders-main {
    width: 100%;
    padding: 1rem;
}

/* Bestellübersicht */
.orders-main,
.order-details-main {
    padding: 20px;
}

.orders-main h2,
.order-details-main h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.order-details {
    padding: 20px;
}

.cart-page {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Abweichender Style für das body-Tag                                                                                                                              */
/* ================================================================================================================================================================ */
/* #region AbweichendeBodyStyles */
.logout-body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Styles für den Container auf der Seite                                                                                                                           */
/* ================================================================================================================================================================ */
/* #region ContainerStyles */
.orders-list,
#loginProduktauswahl {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-card {
    position: relative;
    /* neu: für das absolute Positionieren des Tables */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.order-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Link in der Card bleibt unverändert block-level */
.order-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.order-card div {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.order-card div strong {
    flex: 0 0 14%;
    font-weight: bold;
}

.order-card form {
    display: flex;
    flex-direction: column;
}

.order-card label {
    font-weight: bold;
    margin-top: 10px;
}

.order-card input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
}

.order-card button {
    background-color: var(--button_hintergrund);
    color: var(--button);
    padding: 10px;
    border: none;
    cursor: pointer;
    margin-top: 15px;
}

.order-card button:hover {
    background-color: var(--button_hintergrundHover);
    color: var(--buttonHover);
    transition: background-color 0.3s ease;
}


/* Container um die Tabelle, standardmäßig versteckt */
.order-positions {
    position: static;
    display: none;
    top: 100%;
    /* direkt unterhalb der Card */
    left: 0;
    right: 0;
    /* volle Breite der Card */
    margin-top: 0.5rem;
    /* etwas Abstand */
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 10;
    overflow-x: auto;
    /* horizontales Scrollen, falls Tabelle zu breit */
}

/* Tabelle selbst */
.order-positions .order-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    /* anpassen nach Bedarf */
}

.order-positions .order-table th,
.order-positions .order-table td {
    padding: 0.5em 0.75em;
    border: 1px solid #eee;
    background: #fafafa;
}

.order-positions .order-table th {
    background: #f0f0f0;
    text-align: left;
}

/* Beim Hover über die Card die Positions-Tabelle einblenden */
.order-card:hover .order-positions {
    display: block;
}

.orders-list,
.order-card {
    overflow: visible;
    /* erlaubt das Hineinwachsen der Tabelle */
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Styles für die Pagination                                                                                                                                        */
/* ================================================================================================================================================================ */
/* #region PaginationStyles */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
    font-family: sans-serif;
}

.pagination button {
    padding: 6px 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    color: black;
    background-color: #ffffff;
}

.pagination button.active {
    border: 1px solid black;
    background-color: var(--button_hintergrund);
    color: var(--button);
}

.pagination button:disabled {
    cursor: pointer;
}

.pagination button:hover {
    transition: background-color 0.3s ease;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Styles für abweichende Container (soll noch durch orders-list und order-card ersetzt werden)                                                                     */
/* ================================================================================================================================================================ */
/* #region AbweichendeContainerStyles */
.order-info,
.shipping-info,
.billing-info,
.delivery-info,
.ordered-items {
    margin-bottom: 20px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.order-info p,
.shipping-info p,
.billing-info p,
.delivery-info,
.ordered-items li {
    margin-bottom: 10px;
}

.products .productselection .login tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Abweichendende Styles für den Form-Bereich in Warenkorb,Bestellliste und Auftragsdetails (kann evtl noch ersetzt werden)                                         */
/* ================================================================================================================================================================ */
/* #region AbweichendFormStyles */
.AuftragsdetailsArtikellink,
.AuftragsdetailsArtikellink button {
    all: unset;
    cursor: pointer;
    display: inline;
}

.AuftragsdetailsArtikellink button:focus {
    outline: none;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Styles für die Dokumententabellen                                                                                                                                */
/* ================================================================================================================================================================ */
/* #region DokumententabellenStyles */

.order-card,
.documents-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
    /* Ermöglicht Scrollverhalten */
    box-sizing: border-box;
    /* Padding wird mit einberechnet */
}

.documents-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-family: sans-serif;
    display: table;
}

.documents-table td,
.documents-table th {
    border: 1px solid #ccc;
    padding: 8px 12px;
}

.documents-table tbody>tr:first-child>td {
    background-color: #ececec;
    font-weight: bold;
}

.documents-table td.S-B2BGruppe {
    background-color: #f7f7f7;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
}

.documents-table tr.TabelleZeile2 td.S-B2BText:nth-of-type(odd),
.documents-table tr.TabelleZeile2 td.S-B2BText:nth-of-type(even) {
    background-color: #fff;
}

.documents-table tr.TabelleZeile2:nth-of-type(odd) td.S-B2BText {
    background-color: #fafafa;
}

.documents-table a {
    color: inherit;
    text-decoration: none;
}


.documents-table tr:nth-of-type(2) {
    display: none;
}

.documents-table tr img {
    display: none;
}

td .logout-button {
    display: block;
    /* macht aus dem Inline-Button einen Block */
    width: 100%;
    /* füllt die gesamte Zellenbreite */
    margin: 0 auto;
    /* zentriert horizontal (sofern nötig) */
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    box-sizing: border-box;
    text-align: center;
}

td.button-cell {
    display: flex;
    gap: 8px;
    /* Abstand zwischen Buttons */
    justify-content: center;
    /* optional: mittig ausrichten */
}


button[id^="loeschen"] {
    background-color: #d9534f;
    /* Bootstrap-rot oder eigener Farbton */
    color: #fff;
    border: none;
}

button[id^="loeschen"]:hover {
    background-color: #c9302c;
    /* dunkleres Rot beim Hover */
}



/* #endregion */

/* ================================================================================================================================================================ */
/* Styles für die Produktauswahltabelle                                                                                                                                */
/* ================================================================================================================================================================ */
/* #region ProduktauswahltabelleStyles */

.produktauswahl-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-family: sans-serif;
}

.produktauswahl-table td {
    border: 1px solid #ccc;
    padding: 8px 12px;
}

.produktauswahl-table tr {
    color: #025aa5;
    background-color: #fff;
}


.produktauswahl-table a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

/* #endregion */


/* ================================================================================================================================================================ */
/* Styles für die Toast-Message                                                                                                                                     */
/* ================================================================================================================================================================ */
/* #region ToastMessageStyles */
.toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;

    /* Vergrößertes Padding & Minimum-Breite */
    padding: 1rem 1.5rem;
    min-width: 220px;

    /* Größere Schrift und Zeilenhöhe */
    font-size: 1rem;
    line-height: 1.4;

    background: rgba(0, 0, 0, 0.85);
    color: #fff;

    border-radius: 6px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 10000;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Styles für die Navigationsleiste                                                                                                                                 */
/* ================================================================================================================================================================ */
/* #region NavigationsleisteStyles */

.burger-button {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--button);
    margin-right: 10px;
}

.logo img {
    height: 40px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #fff;
}

.nav-menu {
    display: flex;
    align-items: center;
    flex: 1;
    /* <- DAS sorgt dafür, dass nav-menu den übrigen Platz füllt */
    gap: 20px;
    flex-wrap: nowrap;
    /* Optional, damit bei kleineren Bildschirmen Umbrüche erlaubt sind */
}

.nav a {
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav a:hover {
    background-color: #f0f0f0;
    color: #000;
    border-radius: 5px;
}


.search-input {
    font-family: var(--main-font);
}

.logout-button {
    border: none;
    padding: 0.2rem 1rem;
    cursor: pointer;
    border-radius: 5px;
    font-family: var(--main-font);
    background-color: var(--button_hintergrund);
    color: var(--button);
    transition: all 0.3s ease;
}

.logout-button:hover {
    color: var(--buttonHover);
    background-color: var(--button_hintergrundHover);
    transform: scale(1.1);
}

.logout-button a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 90%;
    background-color: var(--button_hintergrund);
    color: var(--button);
}

.logout-button a:hover {
    background-color: var(--button_hintergrundHover);
    color: var(--buttonHover);
    text-decoration: none;
    display: block;
    width: 100%;
    height: 90%;
    transition: background-color 0.3s ease;
}

form[name="Suche-Menue"] {
    display: flex;
    align-items: stretch;
    /* Stellt sicher, dass das Input-Feld die volle Höhe einnimmt */
    height: 80%;
    width: 250px;
}

form[name="Suche-Menue"] input,
form[name="Suche"] #sSuchbegriffArtikel {
    color: #333;
    background-color: #fff;
}

form[name="Suche-Menue"] button,
form[name="Suche"] .search-button {
    color: var(--button);
    background-color: var(--button_hintergrund);
}

form[name="Suche-Menue"] button:hover,
form[name="Suche"] .search-button:hover {
    color: var(--buttonHover);
    background-color: var(--button_hintergrundHover);
}


#Suchbegriff_Artikel_Menue {
    padding: 10px;
    flex: 1;
    /* Nimmt die gesamte verfügbare Höhe und Breite ein */
    box-sizing: border-box;
    /* Sorgt dafür, dass Padding & Border die Höhe nicht beeinflussen */
}

#Suchbegriff_Artikel_Menue {
    padding: 10px;
    /* Fügt innen Platz hinzu */
}

.cart-badge {
    position: absolute;
    top: 1px;
    right: -1px;
    background-color: var(--h2);
    color: #fff;
    border-radius: 50%;
    padding: 0 5px;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    min-width: 16px;
    height: 16px;
    text-align: center;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Styles für den Footer                                                                                                                                            */
/* ================================================================================================================================================================ */
/* #region FooterStyles */
.footer {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    background-color: var(--footer_hintergrund);
    color: var(--footer);
}

.footer ul {
    list-style: none;
    margin-top: 0.5rem;
}

.footer ul li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    /* Kleiner als Standardtext */
}

.footer a {
    text-decoration: none;
    color: var(--footer);
}

.footer a:hover {
    text-decoration: none;
    color: var(--footerHover);
}

.language-selector {
    position: relative;
    cursor: pointer;
    user-select: none;
}

#language-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0.5em;
    margin: 0;
    border: 1px solid #ccc;
    z-index: 1000;    
    border-radius: 4px;

    display: grid;
    grid-template-columns: repeat(3, auto); /* max. 3 pro Zeile */
    gap: 0.5em 1em;

    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    pointer-events: none;
}

#language-dropdown.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#language-dropdown li {
    list-style: none;
    text-align: center;
}

#language-dropdown a {
    display: block;
    padding: 0.25em 0.5em;
    border-radius: 5px;
    text-decoration: none;
    color: var(--footerHover);
    transition: background-color 0.2s;

    cursor: pointer;
    font-family: var(--main-font);
    background-color: var(--button_hintergrund);
    color: var(--button);
}

#language-dropdown a:hover {
    background-color: var(--button_hintergrundHover);
    color: var(--buttonHover);
}

#language-label {
    pointer-events: none;
    cursor: default;
}

#language-label,
#current-language {
    color: var(--footer);
}

#language-label:hover,
#current-language:hover {
    color: var(--footerHover);
}


/* #endregion */

/* ================================================================================================================================================================ */
/* Styles für die Kontextmenüs                                                                                                                                      */
/* ================================================================================================================================================================ */
/* #region KontextmenüStyles */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Hover-Effekt f�r die Beschriftung */
.context-menu ul li:hover .product-group-label {
    color: #fff;
    background: rgba(0, 0, 0, 0.9);
    /* Etwas dunkler beim Hover */
    transform: translateY(-2px);
    /* Leichtes Heben */
}

/* Basisstil f�r das Account-Men� */
.context-menu-account {
    position: absolute;
    top: 100%;
    /* Men� wird direkt unter dem Button angezeigt */
    left: 0;
    /* Men� wird an der linken Kante des Dropdowns ausgerichtet */
    background-color: #fff;
    /* Hintergrundfarbe des Men�s */
    border: 1px solid #ddd;
    /* D�nner Rahmen */
    border-radius: 5px;
    /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Leichter Schatten */
    width: 225px;
    /* Breite des Men�s */
    z-index: 1000;
    /* Men� �ber anderen Elementen anzeigen */
    visibility: hidden;
    /* Standardm��ig ausgeblendet */
    opacity: 0;
    /* Unsichtbar */
    transform: translateY(-10px);
    /* Leicht verschoben f�r sanfte Animation */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Sanfte �berg�nge */
}

/* Men� sichtbar machen bei Hover */
.dropdown:hover .context-menu-account {
    visibility: visible;
    /* Sichtbar */
    opacity: 1;
    /* Volle Sichtbarkeit */
    transform: translateY(0);
    /* Zur�ck in die Ausgangsposition */
}

/* Liste innerhalb des Men�s */
.context-menu-account ul {
    list-style: none;
    /* Keine Punkte oder Zahlen */
    margin: 0;
    padding: 0;
}

/* Einzelne Men�punkte */
.context-menu-account ul li {
    padding: 10px 15px;
    /* Abstand innerhalb der Elemente */
    font-size: 1rem;
    /* Standard-Schriftgr��e */
    color: #333;
    /* Textfarbe */
    cursor: pointer;
    /* Zeigerhand bei Hover */
    border-bottom: 1px solid #eee;
    /* D�nne Linie zwischen Men�punkten */
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Sanfte Hover-Effekte */
}

/* Letzter Men�punkt ohne untere Linie */
.context-menu-account ul li:last-child {
    border-bottom: none;
}

/* Hover-Effekt f�r Men�punkte */
.context-menu-account ul li:hover {
    background-color: #f5f5f5;
    /* Helles Grau */
    color: #000;
    /* Dunklere Textfarbe */
}

/* Links in Men�punkten (falls verwendet) */
.context-menu-account ul li a {
    text-decoration: none;
    /* Keine Unterstreichung */
    color: inherit;
    /* Erbt die Textfarbe */
    display: block;
    /* Klickbarer Bereich f�llt den gesamten Men�punkt */
}

/* Hover f�r Links */
.context-menu-account ul li a:hover {
    text-decoration: none;
    /* Keine Unterstreichung auch beim Hover */
    color: #000;
    /* Optional dunklere Farbe */
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die Homepage.html                                                                                                                         */
/* ================================================================================================================================================================ */
/* #region HomepageStyles */
.Willkommenstext {
    position: relative;
    display: inline-block;
    color: var(--h2);
}

.homepage-banner {
    width: 100%;
    position: relative;
    overflow: hidden; /* Verhindert, dass die Bilder außerhalb des Containers sichtbar sind */
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider div {
    flex: 0 0 100%; /* Jedes Bild nimmt 100% des Containers ein */
}

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

/* Text auf dem Banner für die Desktop-Version */
.homepage-banner .banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(51, 51, 51, 0.5);
    color: #fff;
    padding: 20px 0;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 2rem; /* Für größere Bildschirme */
    border-radius: 0;
}

.slider-navigation {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 20px;
    box-sizing: border-box;
    pointer-events: none; /* Buttons selbst sind klickbar, nicht der Container */
}

.slider-navigation button {
    pointer-events: all;
    background-color: var(--button_hintergrund);
    color: var(--button);
    border: none;
    font-size: 2rem;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.slider-navigation button:hover {
    background-color: var(--button_hintergrundHover); /* deine Akzentfarbe */
    color: var(--button);
    transform: scale(1.1);
}

.slider-navigation .prev {
    margin-left: 10px;
}

.slider-navigation .next {
    margin-right: 10px;
}

/* Begrüßungstext */
.welcome {
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
}

/* Info-Boxen */
.info-boxes {
    display: flex;
    /* Flexbox zur horizontalen Anordnung */
    gap: 20px;
    /* Abstand zwischen den Boxen */
    margin: 20px 0;
    flex-wrap: wrap;
    /* Umbrechen der Boxen bei zu wenig Platz */
}

.info-box {
    flex: 1;
    /* Boxen teilen sich den Platz gleichmäßig */
    min-width: 300px;
    /* Minimale Breite der Boxen */
    max-width: calc(33.33% - 20px);
    /* Maximale Breite (ein Drittel abzüglich Abstand) */
    padding: 20px;
    background-color: #ffffff;
    /* Weißer Hintergrund */
    border: 1px solid #ddd;
    /* Leichte Abgrenzung */
    border-radius: 10px;
    /* Abgerundete Ecken */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Schatten für optische Tiefe */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Hover-Effekt */
}

.info-box h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: #333;
}

.info-box ul {
    list-style: none;
    /* Entfernt Standard-Aufzählungspunkte */
    padding: 0;
}

.info-box a {
    margin-bottom: 10px;
    font-size: 1rem;
    /* color: #555; */
    text-decoration: none;
}

.info-box p {
    margin: 10px 0;
    font-size: 1rem;
}

.welcome {
    color: var(--h2);
}

/* Offene Bestellungen */
.OffeneBestellungenUndAnfragen,
.LetzteSechsAbgeschlosseneBestellungen {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.OffeneBestellungenUndAnfragen td,
.LetzteSechsAbgeschlosseneBestellungen td {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
}

.OffeneBestellungenUndAnfragen a,
.LetzteSechsAbgeschlosseneBestellungen a {
    text-decoration: none;
    font-weight: 500;
}

.OffeneBestellungenUndAnfragen a {
    color: #333;
}

.LetzteSechsAbgeschlosseneBestellungen a {
    color: #333;
}

.OffeneBestellungenUndAnfragen a:hover {
    color: #4d4d4d;
}

.LetzteSechsAbgeschlosseneBestellungen a:hover {
    color: #4d4d4d;
}

/* Kontaktinformationen */
.info-box p a {
    color: #333;
    text-decoration: none;
}

/* Hover-Effekt für die Boxen */
.info-box:hover {
    transform: translateY(-5px);
    /* Leichtes Anheben der Box bei Hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Stärkerer Schatten bei Hover */
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die products.html                                                                                                                         */
/* ================================================================================================================================================================ */
/* #region Products.HTMLStyles */
.main-content {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.product-list {
    width: 100%;
}

.product-search {
    display: flex;
    margin-bottom: 20px;
}

.product-search input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
}

.search-button {
    padding: 10px;
    background-color: var(--button_hintergrund);
    color: var(--button);
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-button:hover {
    background-color: var(--button_hintergrundHover);
    transform: scale(1.1);
}

.sort-options {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.sort-button {
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sort-button.active {
    background-color: #333;
    color: #fff;
}

.sort-button:hover {
    background-color: #f0f0f0;
    color: #000;
}

.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.product-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.product-image {
    width: 100%;
    /* Die Breite des Containers */
    height: 200px;
    /* Feste Höhe des Containers (kann angepasst werden) */
    overflow: hidden;
    /* Verhindert, dass das Bild über den Container hinausgeht */
    cursor: pointer;
}

.product-image img {
    width: 100%;
    /* Passt die Breite des Bildes an den Container an */
    height: 100%;
    /* Passt die Höhe des Bildes an den Container an */
    object-fit: cover;
    /* Das Bild wird skaliert, um den Container auszufüllen */
    object-position: center;
    /* Positioniert das Bild mittig */
}

.product-text,
.product-price {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
    text-align: center;
}

.product-text {
    font-size: 1rem;
    margin-bottom: 5px;
}

.product-price {
    font-size: 0.9rem;
    color: #888;
}

.product-text:hover {
    color: #333;
}

.product-price:hover {
    color: #888;
}

.product-link {
    text-decoration: none;
    /* Entfernt Unterstreichung */
    color: #555;
    display: block;
    /* Macht den gesamten Inhalt klickbar */
}

/* Verhindert Änderungen der Schriftfarbe beim Hover */
.product-link:hover {
    text-decoration: none;
    /* Auch beim Hover keine Unterstreichung */
    color: #555;
    /* Schriftfarbe bleibt unverändert */
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die product_details.html                                                                                                                  */
/* ================================================================================================================================================================ */
/* #region Product_Details.HTMLStyles */

.product-container {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-left {
    flex: 1;
}

.product-title {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 0.2em;
    color: #222;
}

.product-subtitle {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 0.1em;
}

.product-code {
    font-size: 1em;
    color: #888;
    margin-top: 0.4em;
    font-style: italic;
}

/* Rechte Seite: Produktinformationen */
.product-right {
    flex: 1.2;
    /* Größer als das Bild für bessere Darstellung */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Produktpreis */
.productdetail-price {
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
}

.productdetail-priceperkg {
    font-size: 0.9em;
    color: #666;
    margin-left: 5px;
    vertical-align: middle;
    font-style: italic;
}

/* Mengenfeld */
.product-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

#quantity {
    width: 60px;
    padding: 5px;
    font-size: 1rem;
}

/* Gebindegrößen */
.package-options {
    margin-top: 20px;
}

.package-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

[class*="package-btn"] {
    padding: 10px 15px;
    border: 1px solid #333;
    background-color: var(--button_hintergrund);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    margin: 3px;
}

[class*="package-btn"]:hover,
[class*="package-btn"].active {
    background-color: var(--button_hintergrundHover);
    color: var(--buttonHover);
}

/* Warenkorb-Button */
.add-to-cart {
    display: inline-block;
    /* Macht das <a> Tag wie einen Button */
    background-color: var(--button_hintergrund);
    color: var(--button);
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    width: 30%;
    /* Breite bleibt gleich */
    text-align: center;
    /* Zentriert den Text */
    text-decoration: none;
    /* Entfernt die blaue Unterstreichung von Links */
    font-size: 16px;
    /* Optional: Falls dein Button zu klein ist */
    border-radius: 5px;
    /* Optional: Falls du abgerundete Ecken möchtest */
    transition: all 0.3s ease;
}

.add-to-cart:hover {
    background-color: var(--button_hintergrundHover);
    text-decoration: none;
    transform: scale(1.1);
    /* Sicherstellen, dass kein Hover-Textdekor erscheint */
}

.add-to-cartMuster {
    display: inline-block;
    background-color: var(--button_hintergrund);
    color: var(--button);
    padding: 6px 10px;             /* kleineres Padding */
    border: none;
    cursor: pointer;
    margin-top: 10px;              /* weniger Abstand */
    width: 25%;                    /* etwas schmaler */
    text-align: center;
    text-decoration: none;
    font-size: 14px;               /* etwas kleinere Schrift */
    border-radius: 4px;            /* etwas weniger Rundung */
    transition: all 0.3s ease;
    opacity: 0.9;                  /* leicht zurückgenommenes Erscheinungsbild */
}

.add-to-cartMuster:hover {
    background-color: var(--button_hintergrundHover);
    text-decoration: none;
    transform: scale(1.1);
}



/* Produktbeschreibung über die gesamte Breite */
.product-description {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    /* Abstand zwischen Bild und Infos */
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-description-left {
    flex: 0.5;
}

.product-description-left p {
    color: #4A4A4A;
    /* Dunkles Grau für die Textfarbe */
    font-size: 1rem;
    margin: 5px 0;
}

.product-description-right {
    flex: 1.2;
    max-width: 1200px;
    /*   margin: 40px auto; 
    padding: 20px;*/
}

.product-description-right h3 {
    font-size: 1.4rem;
}

/* ================= Fliegt evtl noch raus ===============
/* 1. Tabellenkopfzeile (Headerzeile) ausblenden */
.documents-table-product-details td.tabelleheader {
    display: none;
}

/* 2. In Zeilen mit Zellen der Klasse S-B2BGruppe: nur die erste Spalte anzeigen */
.documents-table-product-details tr td.S-B2BGruppe:not(:first-child) {
    display: none;
}

/* 1. IMG-Tags innerhalb der Tabelle ausblenden */
.documents-table-product-details img {
    display: none;
}

/* 2. Links innerhalb der Tabelle dunkelgrau einfärben */
.documents-table-product-details a {
    color: #4A4A4A;
    /* Dunkles Grau für die Textfarbe */
    font-size: 1rem;
    margin: 5px 0;
    line-height: 1.7;
    text-decoration: none;
}

/* Optional: Farbe bei Hover (z. B. dunkler oder mit Unterstreichung) */
.documents-table-product-details a:hover {
    color: #333;
    text-decoration: underline;
    cursor: pointer;
}

.documents-table-product-details td:nth-child(2),
.documents-table-product-details th:nth-child(2) {
    display: none;
}

.documents-table-product-details tr:has(td.S-B2BGruppe:first-child:not(:empty)) {
    display: none;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die orders.html                                                                                                                           */
/* ================================================================================================================================================================ */
/* #region Orders.HTMLStyles */
.order-separator {
    display: block;
    font-size: 1.25rem;
    /* etwas größere Schrift */
    font-weight: bold;
    color: #333;
    /* dunkle Schrift */
    background: #f5f5f5;
    /* hellgrauer Hintergrund */
    margin: 1.5rem 0 0.5rem;
    /* Abstand oben und unten */
    padding: 0.5rem 1rem;
    /* etwas Innenabstand */
    border: none;
    /* keine Umrandung */
    border-radius: 4px;
    /* optional: abgerundete Ecken */
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die order-details.html                                                                                                                    */
/* ================================================================================================================================================================ */
/* #region Order-Details.HTMLStyles */
.order-table-documents {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.order-table-documents tr>td:nth-child(2),
.order-table-documents tr>td:nth-child(4) {
    display: none;
}

/* 2) Zell-Grundstyling */
.order-table-documents td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

/* 3) Header-Look auf die erste Zeile übertragen */
.order-table-documents tbody>tr:first-child>td {
    background-color: #f0f0f0;
    font-weight: bold;
}

/* 4) Hover-Effekt auf alle weiteren Zeilen */
.order-table-documents tbody>tr:hover>td {
    background-color: #f5f5f5;
}

.order-table-documents a {
    color: inherit;
    /* übernimmt die Textfarbe des Eltern-Elements */
    text-decoration: none;
    /* entfernt das Unterstreichen */
}

.order-header h1 {
    font-size: 1.8rem;
    color: #333;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.order-section {
    margin-bottom: 30px;
}

.order-section h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #555;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.order-info,
.customer-info {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    line-height: 1.8;
}

.customer-info {
    flex: 1;
}

.customer-info table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.customer-info table td:first-child {
    width: 55px;
    padding-right: 0.5em;
    white-space: nowrap;
}

.order-info p,
.customer-info p {
    font-size: 1rem;
    margin-bottom: 5px;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.order-table th,
.order-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.order-table th {
    background-color: #f0f0f0;
    font-weight: bold;
}

.order-table tbody tr:hover {
    background-color: #f5f5f5;
}

.order-table .product-btn:hover {
    background-color: #f5f5f5;
    color: inherit;
}

.fab-duplicate {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die cart.html                                                                                                                             */
/* ================================================================================================================================================================ */
/* #region Cart.HTMLStyles */
.cart-table {
    width: 65%;
}

.cart-table h1 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.cart-table h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.cart-table table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th,
.cart-table td {
    text-align: left;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.cart-table th {
    background-color: #f9f9f9;
    font-size: 1rem;
    font-weight: bold;
}

.cart-table .product-details {
    display: flex;
    gap: 15px;
    align-items: center;
}

.cart-table .product-details img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.cart-table .product-details .details {
    display: flex;
    flex-direction: column;
}

.cart-table .product-details a {
    color: #333;
    font-size: 0.8rem;
    text-decoration: none;
    margin-top: 5px;
    font-style: italic;
}

.cart-table .product-details a:hover {
    text-decoration: none;

}

.cart-table .quantity input {
    width: 50px;
    padding: 5px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.cart-table .price,
.cart-table .total {
    font-size: 1rem;
    color: #333;
}


.details-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.WarenkorbArtikelbild img {
    max-width: 100px;
    height: auto;
    display: block;
    cursor: pointer;
}

.text-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.order-summary {
    width: 30%;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.order-summary h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.order-summary p {
    font-size: 1rem;
    margin-bottom: 15px;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die profile.html                                                                                                                          */
/* ================================================================================================================================================================ */
/* #region Profile.HTMLStyles */
.password-reset {
    font-family: var(--main-font);
    background-color: var(--button_hintergrund);
    color: var(--button);
    transition: all 0.3s ease;
}

.password-reset:hover {
    font-family: var(--main-font);
    background-color: var(--button_hintergrundHover);
    color: var(--buttonHover);
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die orderinfo.html                                                                                                                        */
/* ================================================================================================================================================================ */
/* #region Orderinfo.HTMLStyles */
.logout-container {
    background: #fff;
    padding: 20px;
    width: 350px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
}

.logout-container img {
    width: 100px;
    margin-bottom: 15px;
}

.logout-container p {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.logout-container .info-text {
    font-size: 14px;
    color: #333;
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die login.htm                                                                                                                             */
/* ================================================================================================================================================================ */
/* #region login.htmStyles */
.Login {
    margin: 50px auto;
    width: 375px;
    padding: 50px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 10px 10px 10px rgba(128, 128, 128, 0.281);
}

.Login .image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.Login .Willkommenstext {
    font-size: 22px;
    display: block;
    margin-bottom: 20px;
    color: #333;
}

a.passwortvergessen {
    text-decoration: none;
    /* Keine Unterstreichung */
    color: #333;
    /* Gleiche Farbe wie umgebender Text */
}

a.passwortvergessen:visited {
    color: #333;
    /* Keine lila Farbe nach dem Klicken */
}

a.passwortvergessen:hover,
a.passwortvergessen:active,
a.passwortvergessen:focus {
    color: #4d4d4d;
}


.LoginLabel {
    color: #fff;
}

.Login input[type="text"],
.Login input[type="password"] {
    width: 100%;
    padding: 12px 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-family: var(--main-font);
}

.Login input[type="submit"] {
    background-color: var(--button_hintergrund);
    color: var(--button);
    font-size: 16px;
    padding: 10px 20px;
    margin-bottom: 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--main-font);
}

.Login input[type="submit"]:hover {
    background-color: var(--button_hintergrundHover);
    color: var(--button);
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die passwortvergessen.htm                                                                                                                 */
/* ================================================================================================================================================================ */
/* #region passwortvergessen.htmStyles */
.PasswortAbrufenEingabefeld {
    background-color: #fff;
    color: #333;
}

.PasswortVergessen {
    margin: 50px auto;
    width: 400px;
    padding: 50px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 10px 10px 10px rgba(128, 128, 128, 0.281);
}



/* Input Buttons formatieren */
.PasswortVergessen input[type="text"],
.PasswortVergessen input[type="password"] {
    width: 100%;
    padding: 12px 30px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--main-font);
}

.PasswortVergessen input[type="submit"] {
    background-color: var(--button_hintergrund);
    font-size: 16px;
    color: var(--button);
    padding: 10px 20px;
    margin-bottom: 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.3s;
    font-family: var(--main-font);
}

/* Mouseover Effekte */
.PasswortVergessen input[type="submit"]:hover {
    filter: brightness(1.05);
    background-color: var(--button_hintergrundHover);
    color: var(--buttonHover);
}

.PasswortVergessen .passwortvergessen:hover {
    filter: brightness(1.05);
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die addresses.html                                                                                                                        */
/* ================================================================================================================================================================ */
/* #region addresses.HTMLStyles */
.logout-container {
    background: #fff;
    padding: 20px;
    width: 350px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
}

.logout-container img {
    width: 100px;
    margin-bottom: 15px;
}

.logout-container p {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.logout-container .info-text {
    font-size: 14px;
    color: #333;
}

.adressen-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.adresse {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 350px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: var(--main-font);
    font-size: 14px;
}

.adresse a {
    color: #333;
    text-decoration: none;
    margin-right: 8px;
    font-size: 13px;
    font-style: italic;
}

.adresse a:hover {
    text-decoration: underline;
}

.add-new {
    border: 2px dashed #ccc;
    text-align: center;
    color: #666;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.add-new .plus {
    font-size: 32px;
    margin-bottom: 10px;
}


/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die addresses_edit.html                                                                                                                   */
/* ================================================================================================================================================================ */
/* #region addresses_edit.HTMLStyles */
.adressenbearbeiten {
    display: flex;
    flex-direction: column;
}

.adressenbearbeiten label {
    font-weight: bold;
    margin-top: 10px;
}

.adressenbearbeiten input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: var(--main-font);
}

.adressenbearbeiten input[list="geraete"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: var(--main-font);
}

.adressenbearbeiten input[list="ansprechpartner"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: var(--main-font);
}

#adressenbearbeiten input[list="geraete"] {
    width: 300px;
}

.adressenbearbeiten button,
.adressenbearbeiten a {
    display: inline-block;
    background-color: black;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

.adressenbearbeiten button {
    background-color: var(--button_hintergrund);
}

.adressenbearbeiten button:hover,
.adressenbearbeiten a:hover {
    background-color: var(--button_hintergrundHover);
    transition: background-color 0.3s ease;
}


/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die raise_new_call.html                                                                                                                   */
/* ================================================================================================================================================================ */
/* #region raise_new_call.HTMLStyles */
.dropdown-ticket {
    background-color: #fff;
    position: relative;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: var(--main-font);
}

.dropdown-ticket-geraet {
    position: relative;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: var(--main-font);

}

.dropdown-ticket input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.dropdown-ticket-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


.dropdown-ticket-list.visible {
    display: block;
}

.dropdown-ticket-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}


.dropdown-ticket-row:hover:not(.dropdown-ticket-header) {
    background-color: #f0f0f0;
}

.dropdown-ticket-header {
    font-weight: bold;
    color: #ffffff;
    background: #929494;
    cursor: default;
}

.order-card>.dropdown-ticket {
    all: revert;
}

textarea {
    padding: 10px;
    width: 100%;
    resize: vertical;
    font-family: var(--main-font);
}

/* #endregion */

/* ================================================================================================================================================================ */
/* Spezifische Styles für die fleet_details.html                                                                                                                    */
/* ================================================================================================================================================================ */
/* #region fleet_details.HTMLStyles */
.fleetdetail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: auto;
}

.fleetdetail-table thead {
    background-color: #f0f0f0;
    text-align: left;
}

.fleetdetail-table th,
.fleetdetail-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #ddd;
    white-space: normal;
    /* verhindert zu schmale Spalten */
    border: 1px solid #ccc;
}

.fleetdetail-table th {
    font-weight: bold;
    color: #000;
}

.fleetdetail-table td {
    color: #333;
}

.fleetdetail-table tbody tr:last-child td {
    border-bottom: none;
    border: 1px solid #ccc;
}

.fleetdetail-table th:nth-child(1),
.fleetdetail-table td:nth-child(1) {
    width: 20%;
}

.fleetdetail-table th:nth-child(2),
.fleetdetail-table td:nth-child(2) {
    width: 40%;
}

.fleetdetail-table th:nth-child(3),
.fleetdetail-table td:nth-child(3) {
    width: 20%;
}

.fleetdetail-table th:nth-child(4),
.fleetdetail-table td:nth-child(4) {
    width: 20%;
}

/* #endregion */


/* ================================================================================================================================================================ */
/* Responsive Styles – für kleinere Bildschirmgrößen (Smartphones)     */
/* ================================================================================================================================================================ */

/* Smartphones */
@media (max-width: 768px) {

    /* ================================================================================================================================================================ */
    /* Styles für die Navigationsleiste                                                                                                                                 */
    /* ================================================================================================================================================================ */
    /* #region NavigationsleisteStyles */

    .nav {
        position: relative;
    }

    .burger-button {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #333;
        z-index: 1001;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 80vw;
        background-color: #fff;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        padding: 2rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        overflow-y: auto;
    }

    .nav.nav-open .nav-menu {
        transform: translateX(0);
    }

    .nav-menu.show {
        transform: translateX(0);
    }

    .nav-menu a,
    .nav-menu .dropdown,
    .nav-menu .logout-button {
        width: 100%;
        text-align: center;
        padding: 0.75rem 0;
        border-top: 1px solid #ccc;
        text-decoration: none;
        color: #333;
        font-size: 1rem;
        font-weight: normal;
        background: none;
    }

    /* Dropdown-Verhalten im mobilen Menü */
    .nav .dropdown {
        display: block;
        margin: 0;
        padding: 0;
    }

    .nav .dropdown-button {
        /* pointer-events: none; 
        cursor: default;*/
        pointer-events: auto;
        cursor: pointer;
        font-weight: bold;
        padding: 0.75rem 0;
        border-top: 1px solid #ccc;
    }

    .nav .context-menu-account {
        display: block !important;
        position: static !important;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    .nav .context-menu-account ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .nav .context-menu-account li {
        padding: 0.75rem 0;
        border: none;
    }

    .nav .context-menu-account a {
        display: block;
        color: #333;
        text-decoration: none;
        font-size: 1rem;
        font-weight: normal;
    }

    .nav-menu a {
        display: flex;
        align-items: center;
        height: 48px;
        /* oder eine gewünschte feste Höhe */
        padding: 0 1rem;
    }

    /* Einheitliches Hover-Verhalten */
    .nav-menu a:hover,
    .nav .context-menu-account a:hover {
        background-color: #f5f5f5;
        color: #000;
    }

    .logout-button {
        width: 100%;
        text-align: center;
    }

    .logout-button a {
        display: block;
        padding: 0.75rem 1rem;
        background-color: var(--button_hintergrund);
        color: #fff;
        border-radius: 4px;
        text-decoration: none;
    }

    .logout-button a:hover {
        background-color: var(--button_hintergrundHover);
    }

    .nav .context-menu-account ul {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
    }

    .nav .context-menu-account li {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .nav .context-menu-account li a {
        display: block;
        width: 100%;
        padding: 0.5rem 0;
        text-align: center;
        color: #333;
        text-decoration: none;
        font-size: 1rem;
        border-top: 1px solid #ccc;
    }

    .nav .dropdown-button {
        display: block;
        width: 100%;
        font-weight: bold;
        padding: 0.5rem 0;
    }

    form[name="Suche-Menue"] {
        display: none;
    }




    /* #endregion */

    /* ================================================================================================================================================================ */
    /* Spezifische Styles für die Homepage.html                                                                                                                         */
    /* ================================================================================================================================================================ */
    /* #region HomepageStyles */
    .Willkommenstext {
        display: block;
        padding: 10px 0;
        text-align: center;
    }

    .homepage-banner {
        width: 100%;
        position: relative;
    }

    .slider {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .slider div {
        flex: 0 0 100%;
    }

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

    /* Text auf dem Banner für die mobile Version */
    .homepage-banner .banner-text {
        font-size: 1rem; /* Kleinere Schriftgröße auf mobilen Geräten */
        padding: 10px;
        background: rgba(51, 51, 51, 0.6); /* Etwas transparenterer Hintergrund */
        top: 70%; /* Der Text kann etwas höher gesetzt werden */
    }

    .slider-navigation button {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .welcome {
        padding: 15px;
        margin: 15px 10px;
        font-size: 0.95rem;
    }

    .info-boxes {
        flex-direction: column;
        gap: 15px;
        padding: 0 10px;
    }

    .info-box {
        max-width: 100%;
        width: 100%;
        min-width: auto;
        padding: 15px;
    }

    .info-box h2 {
        font-size: 1.25rem;
    }

    .info-box p,
    .info-box a {
        font-size: 0.95rem;
    }

    .OffeneBestellungenUndAnfragen,
    .LetzteSechsAbgeschlosseneBestellungen {
        font-size: 0.95rem;
    }

    .OffeneBestellungenUndAnfragen td,
    .LetzteSechsAbgeschlosseneBestellungen td {
        padding: 8px 10px;
    }

    .footer {
        text-align: center;
        font-size: 0.9rem;
    }

    .footer-left,
    .footer-middle,
    .footer-right {
        width: 100%;
        margin-bottom: 20px;
    }

    .nav {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .nav a,
    .nav .dropdown-button {
        display: block;
        padding: 10px;
        text-align: center;
    }

    .dropdown .context-menu-account {
        position: static;
        display: block;
    }

    .logout-button a {
        display: block;
        width: 100%;
        text-align: center;
    }

    .context-menu-account {
        position: static;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .dropdown {
        display: block;
    }

    .dropdown-button {
        pointer-events: none;
        /* optional: verhindert das Dropdown-Öffnen */
    }

    .context-menu-account ul li {
        border-bottom: none;
        padding-left: 1rem;
    }

    .context-menu-account ul li a {
        padding: 0.25rem 0;
        display: block;
    }

    /* #endregion */

    /* ================================================================================================================================================================ */
    /* Styles für den Footer                                                                                                                                            */
    /* ================================================================================================================================================================ */
    /* #region FooterStyles */

    .footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }

    .footer-left,
    .footer-middle,
    .footer-right {
        width: 100%;
    }

    .footer ul {
        padding: 0;
    }

    .footer ul li {
        margin-bottom: 0.5rem;
    }

    .language-selector {
    position: relative;
    cursor: pointer;
    user-select: none;
}

#language-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0.5em;
    margin: 0;
    border: 1px solid #ccc;
    z-index: 1000;    
    border-radius: 4px;

    display: grid;
    grid-template-columns: repeat(3, auto); /* max. 3 pro Zeile */
    gap: 0.5em 1em;

    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    pointer-events: none;
}

#language-dropdown.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#language-dropdown li {
    list-style: none;
    text-align: center;
}

#language-dropdown a {
    display: block;
    padding: 0.25em 0.5em;
    border-radius: 5px;
    text-decoration: none;
    color: var(--footerHover);
    transition: background-color 0.2s;

    cursor: pointer;
    font-family: var(--main-font);
    background-color: var(--button_hintergrund);
    color: var(--button);
}

#language-dropdown a:hover {
    background-color: var(--button_hintergrundHover);
    color: var(--buttonHover);
}

#language-label {
    pointer-events: none;
    cursor: default;
}

#language-label,
#current-language {
    color: var(--footer);
}

#language-label:hover,
#current-language:hover {
    color: var(--footerHover);
}

    /* #endregion */

    /* ================================================================================================================================================================ */
    /* Spezifische Styles für die products.html                                                                                                                         */
    /* ================================================================================================================================================================ */
    /* #region Products.HTMLStyles */

    .products {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }

    /* Optional: Styling der Karten */
    .product-card {
        border: 1px solid #ccc;
        padding: 1rem;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease;
    }

    .product-card:hover {
        transform: translateY(-2px);
    }


    /* #endregion */

    /* ================================================================================================================================================================ */
    /* Spezifische Styles für die product_details.html                                                                                                                  */
    /* ================================================================================================================================================================ */
    /* #region Product_Details.HTMLStyles */

    .product-container,
    .product-description {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .product-left,
    .product-right,
    .product-description-left,
    .product-description-right {
        width: 100%;
        flex: unset;
    }

    .product-description-right {
        order: 1;
    }

    .product-description-left {
        order: 2;
    }

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

    .add-to-cart {
        width: 100%;
        font-size: 1.1rem;
    }

    .product-options {
        flex-direction: column;
        align-items: flex-start;
    }

    .package-buttons {
        justify-content: flex-start;
    }

    .productdetail-price,
    .productdetail-priceperkg {
        font-size: 1.2rem;
    }

    .documents-table {
        width: 100%;
        font-size: 0.9rem;
    }

    .product-description h3 {
        font-size: 1.1rem;
    }

    /* #endregion */

    /* ================================================================================================================================================================ */
    /* Spezifische Styles für die cart.html                                                                                                                             */
    /* ================================================================================================================================================================ */
    /* #region Cart.HTMLStyles */

    .cart-page {
        flex-direction: column;
    }

    .cart-table,
    .order-summary {
        width: 100%;
    }

    .cart-table table {
        display: block;
        width: 100%;
    }

    .cart-table thead {
        display: none;
        /* Tabellenkopf ausblenden */
    }

    .cart-table tbody {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .cart-table tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .cart-table td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border: none;
    }

    .cart-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #666;
        flex-basis: 40%;
    }

    .cart-table .product-details {
        flex-direction: row;
        gap: 10px;
    }

    .cart-table .product-details img {
        width: 80px;
        height: 80px;
    }

    .cart-table .product-details .details {
        font-size: 0.95rem;
    }

    .order-summary {
        padding: 15px;
    }

    .cart-table td.product-details::before {
        content: none !important;
        display: none !important;
    }

    .cart-table td.product-details {
        padding-left: 0;
    }

    /* #endregion */

    /* ================================================================================================================================================================ */
    /* Spezifische Styles für die login.htm                                                                                                                             */
    /* ================================================================================================================================================================ */
    /* #region login.htmStyles */

    .Login {
        width: 90%;
        height: 90%;
        margin: 30px auto;
        padding: 30px 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .Login .image {
        width: 80%;
        max-width: 200px;
    }

    .Login .Willkommenstext {
        font-size: 18px;
        text-align: center;
    }

    .Login input[type="text"],
    .Login input[type="password"],
    .Login input[type="submit"] {
        font-size: 16px;
        padding: 10px;
    }

    .Login input[type="submit"] {
        width: 100%;
    }

    .LoginLabel {
        font-size: 14px;
    }

    a.passwortvergessen {
        display: block;
        margin-top: 10px;
        font-size: 14px;
        text-align: center;
    }

    table.login {
        width: 100%;
    }

    table.login td {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    /* #endregion */

    /* ================================================================================================================================================================ */
    /* Spezifische Styles für die passwortvergessen.htm                                                                                                                 */
    /* ================================================================================================================================================================ */
    /* #region passwortvergessen.htmStyles */

.PasswortVergessen {
        width: 90% !important;
        height: 90% !important;
        padding: 30px 20px;
        margin: 30px auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .PasswortVergessen h2 {
        font-size: 20px;
        padding-left: 0.5rem;
    }

    .PasswortVergessen .infotext {
        font-size: 14px;
        text-align: center;
    }

    .PasswortVergessen input[type="text"] {
        font-size: 16px;
        padding: 10px;
    }

    .PasswortVergessen input[type="submit"] {
        width: 100%;
        font-size: 16px;
        padding: 12px;
    }

    .PasswortVergessen label {
        font-size: 14px;
    }

/* #endregion */

}