/* ==========================================================================
   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;
    min-height: 100dvh;
    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;
    /* NEU: Verhindert, dass die Karten vertikal oder horizontal verzerrt werden */
    align-items: flex-start;
    scroll-snap-type: x mandatory;
}
    .grid-wrapper::-webkit-scrollbar {
        display: none;
    }

.grid-card {
    /* 1. Höhe festlegen (25vh minus Padding vom Wrapper) */
    height: 100%;
    /* 2. Breite auf 'auto' setzen, damit aspect-ratio sie berechnen kann */
    width: auto;
    /* 3. Das Quadrat erzwingen */
    aspect-ratio: 1 / 1;
    /* WICHTIG: Stellt sicher, dass Padding INNEN berechnet wird */
    box-sizing: border-box;
    /* Verhindert jegliche Verformung durch Flexbox */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontale Zentrierung */
    justify-content: center; /* Vertikale Zentrierung */
    /* Dein restlicher Code */
    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;
    /* flex-shrink: 0;*/ /* Verhindert, dass die Karte im Flex-Wrapper gestaucht wird */
}
.grid-img-container {
    width: 100%; /* Nutze die volle Breite der Card */
    height: 70%; /* Platz für Text lassen */
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-img {
   height: 100%;
   width:auto;
    object-fit: contain;
}
.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)
   ================================  }*/

/* ===================================== */
/* LANDSCAPE PHONES (Scanner Edge Case) */
/* ===================================== */
@media (orientation: landscape) and (max-height: 500px) {

    header, footer {
        padding: 0.5rem 1rem;
    }

    

   

    .ueberschrift {
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
    }
}

/* ===================================== */
/* SMALL TABLETS (600px+) */
/* ===================================== */
@media (min-width: 600px) {

    :root {
        font-size: 14px;
    }

    

   

    .cookie-banner {
        width: 70%;
    }
}

/* ===================================== */
/* TABLETS (768px+) */
/* ===================================== */
@media (min-width: 768px) {

    :root {
        font-size: 15px;
    }
   

  
}

/* ===================================== */
/* SMALL LAPTOPS (1024px+) */
/* ===================================== */
@media (min-width: 1024px) {

    :root {
        font-size: 16px;
    }

  
}

/* ===================================== */
/* DESKTOP (1280px+) */
/* ===================================== */
@media (min-width: 1280px) {

   
}

/* ===================================== */
/* LapTOP (1300px+) */
/* ===================================== */
@media (min-width: 1300px) and (max-height: 633px) {
    :root {
        font-size: 12px;
    }
}
/* ===================================== */
/* LARGE SCREENS (1920px+) */
/* ===================================== */
@media (min-width: 1920px) {

  
}

/* ===================================== */
/* LOW HEIGHT EDGE CASE */
/* ===================================== */
@media (max-height: 600px) {

  
}







/*DRUCK-EINSTELLUNGEN*/ 
    @media print {
        .no-print {
            display: none !important;
        }

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

        body {
            background: white;
        }
    }