body {
    margin: 0;
    font-family: Verdana, sans-serif;
    background-color: #1a1a1a;
    /* Dunkles Grau für den gesamten Hintergrund */
}

.wrapper {
    max-width: 1500px;
    margin: 0 auto;
    background-color: #ffffff;
    /* Weißer Hintergrund innerhalb der 1500px */
    position: relative;
    /* Für Layout-Referenz */
    min-height: 100vh;
    /* Stellt sicher, dass der Wrapper den gesamten Viewport abdeckt */
}

.customer-data-box,
.order-box {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 100%;
    /* Begrenzt die Breite auf den Container */
}

.customer-data,
.order-data {
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.customer-data.expanded {
    max-height: 400px;
    /* Erhöht für vollständige Sichtbarkeit des Einlesen-Buttons */
    transition: max-height 0.5s ease-in;
}

.order-data.expanded {
    max-height: 300px;
    /* Feste Höhe für Bestellung */
    transition: max-height 0.5s ease-in;
    z-index: 1000;
    /* Überlagert andere Elemente beim Ausklappen */
}

.order-box {
    position: fixed;
    /* Dauerhaft fixiert am unteren Rand */
    bottom: 0;
    width: 100%;
    /* Volle Breite auf Handys und iPads */
    background: #ffffff;
    border-radius: 8px 8px 0 0;
    /* Abgerundete Ecken oben */
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
    padding: 0;
    /* Padding wird im Inneren gesetzt */
    z-index: 1;
    /* Standardwert */
}

.order-box h2 {
    display: flex;
    justify-content: space-between;
    /* Trennt Titel und Gesamtsumme */
    align-items: center;
    margin: 0.5rem 1rem;
    /* Konsistenter Abstand */
}

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

.order-total {
    font-weight: normal;
    font-size: 1rem;
    /* Anpassbar, aktuell gleich wie h2 */
}

.order-data-inner {
    padding: 1rem;
    /* Ursprüngliches Padding hier */
    position: relative;
    /* Für Layout innerhalb */
}

.customer-data-actions,
.order-data-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.actions-left,
.actions-right {
    display: flex;
    gap: 5px;
}

.action-button {
    background: #2196F3;
    /* Blau für Aktionen */
    color: white;
    font-weight: bold;
    padding: 0.7rem 1.4rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.action-button:hover {
    background: #1976D2;
}

.container {
    display: flex;
    flex-direction: row;
    height: calc(100vh - var(--order-box-height, 140px));
    /* Anpassung für zwei Boxen */
    min-height: 0;
    /* Ermöglicht Flex-Child-Höhenanpassung */
}

.categories {
    flex: 50%;
    /* Anpassung auf 50% */
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: #f3f3f3;
    overflow-y: auto;
    height: 100%;
    /* Nutzt den gesamten verfügbaren Platz */
}

.order-summary {
    flex: 50%;
    /* Anpassung auf 50% */
    padding: 1rem 1rem 5rem 1rem;
    background: #e9e9e9;
    overflow-y: auto;
    color: #000;
    order: 2;
    height: 100%;
    /* Füllt den verfügbaren Platz */
}

h2 {
    margin: 0.5rem 0;
    cursor: pointer;
}

.category-box {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.category {
    margin: 0 0 1rem 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.category.expanded {
    max-height: 2000px;
    transition: max-height 0.5s ease-in;
}

.article {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.article-header {
    display: flex;
    justify-content: space-between;
    /* Sicherstellt, dass der Preis nach links ausgerichtet wird, aber rechtsbündig bleibt */
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

.article-header span {
    font-size: 0.9rem;
    /* Standardgröße für Artikeltext */
}

.article-number {
    font-weight: normal;
    /* Nicht fett */
    font-size: 0.85rem;
    /* Eine Stufe kleiner als der Artikeltext */
    margin-left: 0.5rem;
    /* Abstand zum Artikeltext */
}

.article-price {
    margin-left: auto;
    /* Verschiebt den Preis nach rechts */
    margin-right: 1rem;
    /* Konsistenter Abstand zum Button */
    font-size: 0.9rem;
    /* Konsistente Größe */
}

.subarticles {
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.subarticle {
    display: flex;
    justify-content: space-between;
    /* Wie bei .article-header */
    align-items: center;
    padding: 0.25rem 0;
    padding-left: 18px;
    /* Text um 15px nach rechts rücken */
}

.subarticle span {
    font-size: 0.9rem;
    /* Gleiche Größe wie Artikeltext */
}

.subarticle .article-number {
    font-weight: normal;
    /* Nicht fett */
    font-size: 0.85rem;
    /* Eine Stufe kleiner */
    margin-left: 0.5rem;
    /* Abstand zum Label */
}

.subarticle .subarticle-price {
    margin-left: auto;
    /* Rechtsbündig wie .article-price */
    margin-right: 1rem;
    /* Konsistenter Abstand zum Button */
    font-size: 0.9rem;
    /* Gleiche Größe wie Artikelpreis */
}

.article.is-new,
.subarticle.is-new {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2712%27%20height%3D%2724%27%20viewBox%3D%270%200%2012%2024%27%20xmlns%3D%27http://www.w3.org/2000/svg%27%3E%3Crect%20width%3D%2712%27%20height%3D%2724%27%20rx%3D%272%27%20fill%3D%27%23f00%27/%3E%3Ctext%20x%3D%276%27%20y%3D%2712%27%20font-family%3D%27sans-serif%27%20font-size%3D%279%27%20fill%3D%27%23fff%27%20text-anchor%3D%27middle%27%20dominant-baseline%3D%27central%27%20transform%3D%27rotate(-90%2C%206%2C%2012)%27%3ENEW%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 12.15px 30px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

.order-item span {
    flex: 1;
}

.order-item input {
    width: 100px;
    margin-right: 10px;
    /* 10px Abstand zum Löschbutton */
    padding: 0.25rem;
    border: none;
    /* Kein Border */
    border-bottom: 1px solid #ccc;
    /* Nur Border-Bottom */
    border-radius: 0;
    /* Keine abgerundeten Ecken */
    background-color: transparent;
    /* Transparenter Hintergrund */
}

.order-item:nth-child(even) {
    background-color: #ffffff;
    color: #000000;
}

.order-item:nth-child(odd) {
    background-color: #f2f2f2;
    color: #000000;
}

.order-item:hover {
    background-color: #e6e6e6;
    color: #000000;
}

.categories-footer {
    display: none;
    /* Button wird in order-box verschoben */
}

button {
    background: #ccc;
    border: none;
    border-radius: 4px;
    padding: 0 0.5rem;
    cursor: pointer;
}

.footer-button,
.load-button,
.clear-button {
    background: #4caf50;
    color: white;
    font-weight: bold;
    padding: 0.7rem 1.4rem;
    /* Erhöht um ca. 40% */
    font-size: 1.2rem;
    /* Erhöht um ca. 40% */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.load-button:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

.load-button {
    margin-right: 5px;
    /* Abstand zum rechten Rand */
}

.clear-button {
    margin-left: 0;
    /* Abstand zum linken Rand */
}

.subarticles.collapsed {
    display: none;
}

input {
    max-width: 80%;
    /* Breite auf maximal 80% beschränkt */
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    /* Moderne abgerundete Ecken */
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

input:focus {
    outline: none;
    border-color: #4caf50;
    /* Fokus mit grüner Betonung */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

.payment-terms-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payment-terms-container span {
    margin: 0 0.25rem;
}

.payment-terms-container input {
    width: auto;
    margin-bottom: 0;
}

.customer-data-fields input {
    display: block;
    /* Jeder Input wird als Block-Element behandelt */
    width: 100%;
    /* Volle Breite innerhalb des Containers */
    max-width: 80%;
    /* Begrenzung auf 80%, wie zuvor definiert */
    margin-bottom: 0.5rem;
    /* Abstand zwischen den Inputs */
}

.customer-data-fields select {
    display: block;
    width: 100%;
    max-width: 80%;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    background-color: white;
}

.order-data-fields input {
    display: block;
    /* Jeder Input wird als Block-Element behandelt */
    width: 100%;
    /* Volle Breite innerhalb des Containers */
    max-width: 80%;
    /* Begrenzung auf 80%, wie zuvor definiert */
    margin-bottom: 0.5rem;
    /* Abstand zwischen den Inputs */
}

.order-data-fields textarea {
    display: block;
    /* Textarea wird als Block-Element behandelt */
    width: 100%;
    /* Volle Breite innerhalb des Containers */
    max-width: 80%;
    /* Begrenzung auf 80%, wie zuvor definiert */
    margin-bottom: 0.5rem;
    /* Abstand */
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: vertical;
    /* Vertikale Anpassung erlauben */
}

.customer-data-box h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 1rem;
}

.action-icons {
    display: flex;
    gap: 0.5rem;
}

.action-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: #4caf50;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

.action-icon.logout {
    background-color: #f44336;
}

@media (max-width: 1024px) {
    h2 {
        font-size: 1.1rem;
        /* Reduziert von Standardgröße */
    }

    .article-header span {
        font-size: 0.9rem;
        /* Reduziert für Artikeltexte */
    }

    .article-number {
        font-size: 0.75rem;
        /* Eine Stufe kleiner, angepasst an 0.9rem */
    }

    .article-price {
        font-size: 0.9rem;
        /* Reduziert für Preise */
    }

    .subarticle span {
        font-size: 0.9rem;
        /* Gleiche Größe wie Artikeltext */
    }

    .subarticle .article-number {
        font-size: 0.75rem;
        /* Eine Stufe kleiner */
    }

    .subarticle .subarticle-price {
        font-size: 0.9rem;
        /* Gleiche Größe wie Artikelpreis */
    }

    .subarticle span {
        font-size: 0.85rem;
        /* Reduziert für Subitems */
    }
}

.hidden {
    display: none !important;
}

@media (min-width: 1500px) {
    .order-box {
        width: 1500px;
        /* Begrenzt die Breite auf den Wrapper */
        margin: 0 auto;
        /* Zentriert die Box */
    }
}

@media (max-width: 768px) {
    body {
        background-color: #ffffff;
        /* Kein dunkler Hintergrund auf mobilen Geräten */
    }

    .wrapper {
        max-width: 100%;
        /* Volle Breite für mobile Geräte */
    }

    .container {
        flex-direction: column;
    }

    .order-summary {
        order: -1;
    }

    .order-box {
        width: 100%;
        /* Vollständige Breite auf Handys */
    }

    .order-data.expanded {
        max-height: 300px;
        /* Erhöht für zusätzliche Felder */
        z-index: 1000;
        /* Überlagert andere Elemente beim Ausklappen */
    }
}