/* ==========================================================================
   1. DESIGN-SYSTEM (Zentrale Variablen für Konsistenz)
   ========================================================================== */
:root {
    /* Farben */
    --primary-color: #6a0dad; /* Dein Lila */
    --primary-hover: #510787;
    --secondary-color: #258cfb; /* Dein Blau */
    --accent-red: #ff0000;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    --border-color: #dddddd;
    /* Abstände & Rundungen */
    --radius-lg: 1rem;
    --radius-md: 0.5rem;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    /* Standard-Schriftgröße */
}

/* ==========================================================================
   2. GLOBALER RESET & LAYOUT-STRUKTUR
   ========================================================================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-main);
    background-color: var(--bg-light);
    line-height: 1.5; /* Verbessert die Lesbarkeit massiv */
    
}


body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Haupt-Body scrollt nicht */
    background-image: url('/Images/AppBilder/Getraenkebackground.png');
    background-position: center top;
    background-size: cover;
    background-attachment: local;
}

/* Haupt-Container-Struktur */
#layout-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

header, footer {
    flex: 0 0 auto;
    background-color: var(--bg-white);
    z-index: 1000;
}

#main-content-wrapper {
    flex: 1;
    overflow-y: auto; /* Nur hier wird gescrollt */
    -webkit-overflow-scrolling: touch;
}

/* Hintergrund mit Bild-Overlay für bessere Text-Lesbarkeit */
/*.content-background {
    background-image: linear-gradient(rgba(248, 249, 250, 0.8), rgba(248, 249, 250, 0.8)), url('/Images/AppBilder/Getraenkebackground.png');
    background-position: center top;
    background-size: cover;
    background-attachment: local;
}*/
.sticky-back-header {
    width:60%;
    text-align: center;
    margin: 1rem auto;
}
.ueberschrift {
    display: inline-block;
    margin: auto;
    font-weight: bold;
    font-size: 1.5rem;
    background-color: white;
    border-radius: 2rem;
    padding: 1rem
}

.GetränkeKarte{
    background-color:lightgray;
}

/**Die nachste classe sorgt für einen schwarzen Text*/
.meinkunde {
    color: black;
}
/* ==========================================================================
   3. KOMPONENTEN (Buttons, Cards, Modals)
   ========================================================================== */
/* Buttons vereinheitlichen */
.btn-primary-app {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    margin-top: 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.3s ease;
}
/* Spezial-Korrektur, wenn der Button direkt in einer input-group ist */
.input-group .btn-primary-app {
    margin-top: 0; /* Entfernt den Abstand nach oben in Gruppen */
    padding: 0.375rem 1rem; /* Passt das Padding an die Höhe des Inputs an */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

    .btn-primary-app:hover {
        background-color: var(--primary-hover);
    }
/* ==========================================================================
   3. Style KategorieAnzeige auf Index
   ========================================================================== */
/* Die Grid-Cards (Kategorien) */
.grid-wrapper {
    height:25vh;
    padding: 1rem;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
}
    .grid-wrapper::-webkit-scrollbar {
        display: none;
    }

.grid-card {
    /*flex: 0 0 260px;  Feste Breite auf Mobile */
    
    height: 100%;
    margin-right: 1rem;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1rem;
    scroll-snap-align: start;
    text-align: center;
}
.grid-img-container {
    height: 80%;
    width: 30vw;
}
.grid-img {
    height:100%;
   width:auto;
    object-fit: contain;
    margin-bottom: 0.5rem;
}
.grid-info {
    height: 15%;
}

/* Sticker (Angebote) - Jetzt konsistent */
.app-sticker {
    position: absolute;
    top: 10px;
    right: -10px;
    background: var(--accent-red);
    color: white;
    padding: 5px 15px;
    font-weight: bold;
    transform: rotate(15deg);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}

drink-img {
  /*  width: 100%;
    height: 150px;*/
    object-fit: contain;
    margin-bottom: 0.5rem;
}
/* ==========================================================================
   2. Style für Angebot slider
   ========================================================================== */

.laufband-wrapper {
    height: 23vh;
    overflow: hidden;
    margin: 0 auto; /* zentriert den Wrapper horizontal */
    position: relative;
    display: flex;
    justify-content: center;
}

.laufband-spur {
    height: 100%;
    display: flex;
    gap: 1rem;
    will-change: transform;
}

.angebot-card {
    height: 90%;
    width: 28vh;
    background-color: white;
    flex: 0 0 auto;
    border: 1px solid #ddd;
    padding: 0.4rem 0.5rem;
    border-radius: 0.8rem;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
    position: relative;
}

.ÜberschriftInAngebotCard {
    font-size: 0.9rem;
}
/*Image im Frontend definiert*/

.WerteAngebote {
    display: flex;
    font-size: 0.8rem;
    flex-direction: column;
    justify-content: flex-start;
    transform: translateY(4rem);
    width: 30%
}

.angebot-sticker {
    position: absolute;
    top: 1rem;
    right: -2rem;
    background: #ff0000;
    color: white;
    padding: 0.2rem 0.8rem;
    font-weight: bold;
    font-size: 0.8rem;
    transform: rotate(45deg);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    z-index: 10;
}
/* ==========================================================================
   2. Style für PLZ-Abfrage
   ========================================================================== */
.plz-modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.plz-container {
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    width: 75%;
    max-width: 500px;
}

.plz-input {
    width: 100%;
    padding: 0.75rem;
    margin-top: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    font-size: 1rem;
}
/* ==========================================================================
   2. Style für newsletter-Abfrage
   ========================================================================== */
.modal-overlay {
    display: none; /* Versteckt das Modal beim Laden der Seite */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    width: 75%;
    max-width: 500px;
}

#newsletterEmailModal {
    width: 100%;
    padding: 0.75rem;
    margin-top: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    font-size: 1rem;
}


/*************************************************************Getraenke der uk anzeigen*/

/*#BildBeiGetrrDerUkAnz {
    max-height: 40rem;
    object-fit: contain;*/
    /*oder 'cover' je nach gewünschtem Effekt*/
/*}*/
/* Lieferschein spezifische Styles (Basis für Mobile) */

.page .header h1 {
    font-size: 16pt; /* Angepasst für Mobile */
    margin-bottom: 5mm;
    text-align: center;
    font-weight: bold;
}

.page .content p, .page .summary p {
    margin-bottom: 3mm;
    font-size: 0.9rem; /* Relative Einheit nutzen */
}

.page .table {
    font-size: 0.7rem; /* Angepasst für Mobile */
    width: 100%;
    margin: 5mm 0;
}

    .page .table th {
        background-color: #f5f5f5;
        font-weight: bold;
        padding: 2mm;
    }

    .page .table td {
        padding: 1.5mm;
        border-bottom: 1px solid #eee;
    }

.page .summary {
    margin-top: 5mm;
    font-weight: bold;
}

    .page .summary p {
        margin: 2mm 0;
    }

.page .footer {
    margin-top: 5mm;
    font-size: 0.8rem;
    color: #666;
}

#summarytable {
    margin-left: auto;
    width: 100%;
}

    #summarytable p {
        margin-bottom: 0;
    }

    #summarytable td:last-child {
        text-align: right;
    }



/**********************************************************************************Cookie style*/
.cookie-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* Startwert für Mobile */
    height: auto; /* Höhe flexibler lassen */
    max-width: 600px; /* Begrenzung für größere Bildschirme */
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px; /* Etwas weniger Padding für Mobile */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Etwas weniger Gap für Mobile */
}

    .cookie-banner p {
        margin-bottom: 0;
        font-size: 1em; /* Mobile: 1em, wird von html font-size skaliert */
    }

    .cookie-banner button {
        padding: 0.5rem 1rem; /* Kleinere Buttons für Mobile */
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.9em;
        min-width: 30%; /* Kleinere min-width für Mobile */
        margin: 3px;
    }

    .cookie-banner .button-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }


/* ==========================================================================
   4. Style fuer GetraenkeIndex
   ========================================================================== */
/* Container für horizontales Scrollen */
.table-responsive {
    max-height: 70vh; /* Begrenzt die Höhe, falls gewünscht */
    overflow-x: auto;
}
    #Getraenketabelle {
        font-size: 0.75rem;
        white-space: nowrap; /* Verhindert hässliche Zeilenumbrüche in Zellen */
        border-collapse: separate; /* Wichtig für Sticky-Effekt */
        border-spacing: 0;
    }
        /* Sticky Header */
        #Getraenketabelle thead th {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #212529;
        }
    /* Sticky erste und zweite Spalte (Art-Nr & Name) */
    /*   #Getraenketabelle th:nth-child(1),
    #Getraenketabelle td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 5;
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
    }*/
    /*#Getraenketabelle th:nth-child(2),
    #Getraenketabelle td:nth-child(2) {
        position: sticky;
        left: 60px;*/ /* Breite der ersten Spalte anpassen */
    /*z-index: 5;
        background-color: #f8f9fa;
        border-right: 2px solid #dee2e6;
    }*/
    /* Hover-Effekt für klickbare Zeilen */
    .clickable-row:hover td {
        background-color: #e9ecef !important;
        cursor: pointer;
    }
    /* Status-Badges */
    .status-icon {
        font-size: 1rem;
    }

    /* ==========================================================================
   4. Style fuer GetränkeEinlesen
   ========================================================================== */
    /* In deine .css Datei oder <style> Block */
    .bg-primary-gradient {
        background: linear-gradient(45deg, #0d6efd, #0dcaf0);
    }

    .card {
        transition: transform 0.2s ease-in-out;
    }

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

    .progress {
        height: 10px;
        border-radius: 5px;
        margin: 0 20px;
    }

    .input-group-text {
        background-color: #f8f9fa;
    }
    /* ==========================================================================
   4. Style AnzeigeFürMarken
   ========================================================================== */
    /* Container für die Kategorien-Übersicht */
    .category-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        justify-content: center;
        padding: 20px;
    }
    /* Der runde Kategorie-Button */
    .category-circle-btn {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 2px solid #dee2e6;
        background: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }

        .category-circle-btn:hover {
            transform: translateY(-5px) scale(1.05);
            border-color: #0d6efd;
            box-shadow: 0 8px 15px rgba(13, 110, 253, 0.2);
        }
    /* Bild innerhalb des Kreises */
    .category-img {
        width: 65px;
        height: 65px;
        object-fit: contain;
        margin-bottom: 8px;
        transition: transform 0.3s ease;
    }

    .category-circle-btn:hover .category-img {
        transform: scale(1.1);
    }
    /* Text innerhalb des Kreises */
    .category-label {
        font-size: 0.85rem;
        line-height: 1.2;
        text-align: center;
        font-weight: 600;
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Max 2 Zeilen Text */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* ==========================================================================
   4. Style fuer Getraenkeauswahl
   ========================================================================== */
    /* --- Filter & Formulare --- */
    .filter-card {
        background-color: var(--bg-white);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow);
    }

    .form-label-bold {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-main);
        margin-bottom: 0.3rem;
    }
    /* --- Produkt-Karten --- */
    .product-card {
        border-radius: var(--radius-lg);
        border: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
    }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }

    .product-link {
        text-decoration: none;
        color: inherit;
    }
    /* Der Hover-Effekt, den du vorher als "darkgray" hattest, jetzt im App-Style */
    .Wertecolumn {
        transition: all 0.3s ease;
        padding: 1rem;
    }

    .product-card:hover .Wertecolumn {
        background-color: var(--primary-color);
        color: white !important;
    }

    .product-card:hover .card-text,
    .product-card:hover .card-title {
        color: white !important;
    }
    /* Zentriertes Logo oben */
    .centered-image {
        display: block;
        margin: 2rem auto;
        max-width: 250px;
        height: auto;
    }
    /* ==========================================================================
   4. Style Fuer addEditKategorie
   ========================================================================== */
    /* Styling für das Bearbeitungs-Formular */
    .admin-card {
        border-radius: var(--radius-lg);
        border: none;
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .image-preview-container {
        border: 2px dashed var(--border-color);
        border-radius: var(--radius-md);
        padding: 1rem;
        background-color: var(--bg-light);
        text-align: center;
        transition: border-color 0.3s ease;
    }

        .image-preview-container:hover {
            border-color: var(--primary-color);
        }

    .preview-img {
        max-height: 250px;
        object-fit: contain;
        border-radius: var(--radius-md);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    /* Custom File Input (optional, für schöneren Button) */
    .form-control::file-selector-button {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: var(--radius-md);
        cursor: pointer;
        margin-right: 1rem;
    }

        .form-control::file-selector-button:hover {
            background-color: var(--primary-hover);
        }
    /* ==========================================================================
   4. Style Fuer KategorieIndex
   ========================================================================== */
    /* Spezifisch für die Kategorie-Liste */
    .table-img-preview {
        width: 80px;
        height: 80px;
        object-fit: contain;
        background-color: white;
        padding: 5px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
    }
    /* Tabellen-Header Styling */
    .thead-app {
        background-color: #212529;
        color: white;
    }

    .table-middle td {
        vertical-align: middle;
    }
    /* ==========================================================================
   4. Style Add Edit Unterkategorie
   ========================================================================== */
    .form-select-lg {
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
    }

    .bg-primary-app {
        background-color: var(--primary-color) !important;
    }
    /* ==========================================================================
   4. Style Add UnterkategorieIndex
   ========================================================================== */

    .badge-category {
        background-color: var(--bg-light);
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
        padding: 0.4em 0.8em;
        font-weight: 500;
        border-radius: 20px;
    }
    /* ==========================================================================
   4. RESPONSIVE ANPASSUNGEN (Mobile First)
   ========================================================================== */
    /*
 * MOBILE-FIRST MEDIA QUERIES
 * Die Breakpoints sind hier so gewählt, dass sie auf die effektiven Viewport-Breiten reagieren,
 * auch wenn das Betriebssystem skaliert.
 */
/*Beispiel Iphone se*/
@media (min-width: 375px) {
    :root{
       font-size: 13px;
    }
    .laufband-wrapper {
        height: 27vh;
    }
    
}
/*Beispiel IPhone 1*/
@media (min-width: 768px) {
    :root {
        font-size: 14px;
    }
    .grid-img-container {
        height: 80%;
        width: 20vw;
    }
    .laufband-wrapper {
        height: 29vh;
    }
    .angebot-card {
        width: 30vh;
    }

}

@media (min-height: 800px) {
    :root {
        font-size: 15px;
    }
    .grid-wrapper {
        height: 26vh;
    }

    .grid-img-container {
        width: 21vw;
    }

    .laufband-wrapper {
        height: 29vh;
    }

    .angebot-card {
        width: 30vh;
    }
}
@media (min-width: 900px) {
    :root {
        font-size: 15px;
    }

    .grid-wrapper {
        height: 26vh;
    }

    .grid-img-container {
        width: 16vw;
    }

    .laufband-wrapper {
        height: 29vh;
    }

    .angebot-card {
        width: 30vh;
    }
}

@media (min-height: 800px) {
    :root {
        font-size: 16px;
    }

    .grid-wrapper {
        height: 25vh;
    }

    .grid-img-container {
        width: 16vw;
    }

    .laufband-wrapper {
        height: 29vh;
    }

    .angebot-card {
        width: 30vh;
    }
    .ueberschrift {
        display: inline-block;
        margin: auto;
        font-weight: bold;
        font-size: 2rem;
        background-color: white;
        border-radius: 2rem;
        padding: 1rem
    }
}

@media (min-width: 1100px) {
    .grid-img-container {
        width: 15vw;
    }
    }
@media (min-height: 900px) {
    :root {
        font-size: 17px;
    }

    .grid-wrapper {
        height: 27vh;
    }

    .grid-img-container {
        width: 18vw;
    }

    .laufband-wrapper {
        height: 29vh;
    }
}

@media (min-width: 1300px) {
    .grid-img-container {
        width: 14vw;
    }
}
@media (min-height: 900px) {
    :root {
        font-size: 17px;
    }

    .grid-wrapper {
        height: 27vh;
    }

    .grid-img-container {
        width: 20vw;
    }

    .laufband-wrapper {
        height: 29vh;
    }
}

@media (min-width: 1500px) {
    .grid-img-container {
        width: 15vw;
    }
}


    /* TABLETS (Ab 768px) */
    /* meine Respossives */
    /*
320px	Kleine Smartphones	Startpunkt. Einspaltig, große Buttons, Text gut lesbar.
375px - 414px	Moderne Smartphones	Das "Normalmaß". Hier optimierst du das meiste mobile Design.
768px	Tablets (iPad Porträt)	Hier beginnt oft der Wechsel zu zwei Spalten.
1024px+	Laptops / Desktops	Hier greift dein "großes" Layout (wie dein Laptop mit 914px).
*/
    /*@media (min-width: 768px) {
    :root {
        font-size: 14px;
    }

    .grid-card {
        flex: 0 0 300px;
    }
}*/
    /* KLEINE LAPTOPS / DESKTOP (Ab 1024px) */
    /*@media (min-width: 64em) {
    :root {
        font-size: 14px;
    }*/
    /* Zurück auf 16px für Desktop-Dichte */

    /*.grid-wrapper {*/
    /* justify-content: center;  <-- Entfernen oder auskommentieren, wenn Scrollen gewünscht ist */
    /*flex-wrap: nowrap;*/ /* VERHINDERT den Umbruch untereinander */
    /*overflow-x: auto;*/ /* Erlaubt horizontales Scrollen am Desktop */
    /*justify-content: flex-start;*/ /* Startet links, damit man nach rechts scrollen kann */
    /*padding-bottom: 20px;*/ /* Platz für eine eventuelle Scrollbar */
    /*}
}*/
    /* GROSSE MONITORE (Ab 1440px) */
    /*@media (min-width: 90em) {
        :root {
            font-size: 17px;
        }
        .page {
            width: 800px;*/ /* Lieferschein mittig fixiert */
    /*margin: 2rem auto;
        }
    }

@media (min-resolution: 2.6dppx) {
   
        :root {
            font-size: 10px;
        }
    }*/
    /* DRUCK-EINSTELLUNGEN */
    /*@media print {
        .no-print {
            display: none !important;
        }

        #main-content-wrapper {
            overflow: visible;
        }

        body {
            background: white;
        }
    }*/