:root {
    --bg-color: #f4f4f4;
    --card-bg: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --accent-color: #6200ea;
    --price-color: #2e7d32; /* 2e7d32 */
    --border-color: #e0e0e0;
    --shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    --success-bg: #4caf50; /* 4caf50 */
    --archive-bg: #757575;
    --delete-bg: #d32f2f;
    --restore-bg: #1976d2;
	--selected-bg: rgba(166, 220, 160, 0.9);
}

body.dark-theme {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --accent-color: #bb86fc; /* bb86fc */
    --price-color: #81c784;
    --border-color: #333333;
    --shadow: 0 2px 5px rgba(0,0,0,0.5);
	--selected-bg: rgba(26, 75, 20, 0.9);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    user-select: none;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
    padding-bottom: 120px; /* Noch mehr Platz wegen dem Menü */
}

/* --- Header --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    position: sticky;
    top: 0;
    background-color: var(--bg-color);
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.header-title {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
}

/* --- Liste --- */
.list-container {
    padding: 10px;
}

.list-item {
    position: relative;
    background-color: var(--card-bg);
    margin-bottom: 8px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all 0.3s ease;
    height: auto;
    opacity: 1;
}

.item-content {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--card-bg);
    position: relative;
    z-index: 2;
    width: 100%;

    /* 1. Verhindert, dass der Browser horizontales Wischen abfängt (z.B. für "Zurück") */
    touch-action: pan-y; 
    /* 2. Zwingt den Browser, das Element auf eine eigene GPU-Ebene zu legen (60 FPS) */
    will-change: transform;
    /* 3. Hardware Beschleunigung erzwingen (Hack für ältere Android WebViews) */
    transform: translate3d(0,0,0); 

    transition: transform 0.2s ease-out, background-color 0.3s, padding 0.3s;
}

.item-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 15px;
    transition: width 0.3s, height 0.3s;
}

.item-info {
    flex: 1;
    transition: opacity 0.3s;
}

.item-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
    transition: font-size 0.3s;
}

.item-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block;
}

.item-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--price-color);
    margin-left: 10px;
    transition: font-size 0.3s;
}


/* --- Styles für Tags (Supermarkt, Promo, etc.) --- */

.item-tags {
    display: flex;
    flex-wrap: wrap; /* Falls es viele Tags sind, umbrechen */
    gap: 6px;       /* Abstand zwischen den Tags */
    margin-bottom: 4px; /* Abstand zur Beschreibung darunter */
}

.tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    color: white; /* Textfarbe immer weiß für Kontrast */
    text-transform: uppercase; /* Alles groß schreiben für "Badge"-Look */
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Farben für verschiedene Typen */

/* 1. Supermarkt / Ort (Blau) */
.tag-market {
    background-color: #1976d2; 
}

/* 2. Promo / Aktion / Sale (Rot/Pink) */
.tag-promo {
    background-color: #e91e63;
}

/* 3. Info / Hinweis / Bio (Grün/Teal) */
.tag-info {
    background-color: #009688;
}

/* 4. Warnung / Knapp (Orange) */
.tag-warn {
    background-color: #f57c00;
}

/* Anpassung für archivierte Items: Tags auch ausgrauen */
.list-item.archived .tag {
    background-color: #9e9e9e; /* Grau */
    opacity: 0.7;
}


/* --- Swipe Hintergründe --- */
.swipe-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: white;
    padding: 0 20px;
    z-index: 1;
}

.swipe-bg.left {
    background-color: var(--success-bg);
    justify-content: flex-start;
    left: 0;
}

.swipe-bg.right {
    background-color: var(--archive-bg);
    justify-content: flex-end;
    right: 0;
}

.swipe-bg span { display: none; }
.list-item:not(.archived) .swipe-bg.left .text-select { display: inline; }
.list-item:not(.archived) .swipe-bg.right .text-archive { display: inline; }
.list-item.archived .swipe-bg.left { background-color: var(--restore-bg); }
.list-item.archived .swipe-bg.left .text-restore { display: inline; }
.list-item.archived .swipe-bg.right { background-color: var(--delete-bg); }
.list-item.archived .swipe-bg.right .text-delete { display: inline; }

/* --- ZUSTÄNDE --- */
.list-item.selected .item-content {
    border-left: 5px solid var(--success-bg);
    background-color: var(--selected-bg);
}


.list-item.selected .item-tags {
    display: none;
}
.list-item.selected .item-content {
    padding: 5px 10px;
}
.list-item.selected .item-img { width: 45px; height: 45px; margin-right: 10px; }
.list-item.selected .item-title { font-size: 0.9rem; margin: 0; }
/*.list-item.selected .item-price { font-size: 0.9rem; }*/

//-------------------------------------------------------------------


.list-item.archived {
    filter: grayscale(100%);
    pointer-events: auto; 
	opacity: 0.6;
    margin-bottom: 6px;
}

.list-item.archived .item-content {
    background-color: #e0e0e0;
    padding: 5px 10px;
    opacity: 0.6;
	min-height: 35px;
}

body.dark-theme .list-item.archived .item-content {
    background-color: #2c2c2c;
}

.list-item.archived .item-desc { display: none; }
.list-item.archived .item-img { width: 30px; height: 30px; margin-right: 10px; }
.list-item.archived .item-title { font-size: 0.9rem; text-decoration: line-through; margin: 0; }
.list-item.archived .item-price { font-size: 0.9rem; }

/* NEU: Tags (Supermarkt/Aktion) ausblenden */
.list-item.archived .item-tags {
    display: none;
}

/* NEU: Auch die Gewichts-Zeile ausblenden für maximale Kompaktheit */
.list-item.archived .weight-row {
    display: none;
}

/* NEU: Anzahl (1x) kleiner machen */
.list-item.archived .item-qty {
    font-size: 0.9rem;
}


.list-item.deleted {
    transform: translateX(100%);
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* --- Footer Controls --- */
.bottom-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    padding: 0 20px 20px 20px;
    
    /* Layout */
    display: flex;
    justify-content: space-between; /* Preis links, Spacer rechts */
    align-items: flex-end;
    
    pointer-events: none; /* Klicks gehen durch leere Bereiche durch */
    z-index: 1000;
}

.total-display {
    background-color: var(--card-bg);
    padding: 15px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: auto;
    display: flex;
    flex-direction: row;  /* column ; NEU: Zeilen-Anordnung */
    min-width: 120px;
	justify-content: space-between; /* Preis links, Gewicht rechts */
    align-items: center;
    gap: 10px;             /* Abstand zwischen Preis & Gewicht */
}

.total-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

#totalPrice {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-primary);
}

.spacer-right {
    min-width: 20px; /* Nur ein Platzhalter */
}

/* --- FAB (Plus Button) & Menu Wrapper --- */
.fab-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px; /* RECHTS statt Mitte */
    left: auto;  /* Reset von vorher */
    transform: none; /* Reset von vorher */
    
    display: flex;
    align-items: center; /* Vertikal zentriert in der Zeile */
    justify-content: flex-end; /* Alles nach rechts drücken */
    gap: 10px; /* Abstand zwischen Input-Zeile und Button */
    
    pointer-events: auto;
    z-index: 1002;
}

.fab-add {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, background-color 0.3s;
    flex-shrink: 0; /* Button darf nicht gequetscht werden */
    position: relative;
    z-index: 2;
}

.fab-add span {
    font-size: 32px;
    transition: transform 0.3s ease;
}

/* Menu Open State Styles */
.fab-wrapper.menu-open .fab-add {
    background-color: var(--delete-bg);
}
.fab-wrapper.menu-open .fab-add span {
    transform: rotate(45deg);
}


/* --- Quick Add Row (Die Zeile neben dem Button) --- */

.quick-add-row {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    
    /* Animation Startwerte (Versteckt) */
    width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Positionierung */
    margin-right: 5px;
}

/* Wenn Menü offen: Ausfahren */
.fab-wrapper.menu-open .quick-add-row {
    width: 360px; /* Breite des Inputs + Button */
    padding: 5px 5px 5px 15px; /* Padding links größer für Text */
    opacity: 1;
}

.quick-input {
    border: none;
    background: transparent;
    font-size: 1.3rem;
    color: var(--text-primary);
    flex: 1;
    outline: none;
    min-width: 0;
}

.quick-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    width: 36px; /* 36 */
    height: 36px; /* 36 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}


/* --- FAB Options (Die vertikalen Buttons darüber) --- */

.fab-options {
    position: absolute;
    bottom: 80px; /* Über dem Hauptbutton */
    right: 5px;   /* Rechtsbündig zum Button (mit leichtem Versatz zur Mitte des Buttons) */
    
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Text und Buttons rechtsbündig */
    gap: 10px;
    
    /* Animation Startwerte */
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Wenn Menü offen */
.fab-wrapper.menu-open .fab-options {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.fab-option-btn {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 15px;
    font-weight: 700;
	font-size: 1rem;
	min-width: 220px !important;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.fab-option-btn:hover {
    background-color: var(--bg-color);
    transform: scale(1.05);
}

.fab-option-btn:active {
    transform: scale(0.95);
}



/* ---------------------------------
   ------------ dynlist ------------
   --------------------------------- */

/* Suchfeld Container */
.search-wrapper {
    padding: 15px 20px;
    background-color: var(--bg-color);
    position: sticky;
    top: 60px; /* Unterhalb des Headers */
    z-index: 90;
}

.search-input {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-radius: 12px;
    outline: none;
    box-shadow: var(--shadow);
    transition: border-color 0.3s;
}

.search-input:focus {
    border-color: var(--accent-color);
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    margin-top: 50px;
    font-style: italic;
}

/* Action Buttons neben dem Preis */
.item-actions {
    display: flex;
    gap: 10px;
    margin-left: 15px;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg); /* Transparent oder Card-BG */
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.action-btn:active {
    transform: scale(0.9);
}

/* Edit Button (Stift) */
.action-btn.edit:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* Add Button (Plus) */
.action-btn.add {
    border-color: var(--success-bg);
    color: var(--success-bg);
}

.action-btn.add:hover {
    background-color: var(--success-bg);
    color: white;
}

/* Footer Link */
.simple-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-color); /* Oder Card-BG für Kontrast */
    padding: 20px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    z-index: 1000;
}

.custom-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 20px;
    transition: background-color 0.3s;
}

.custom-link:hover {
    background-color: rgba(98, 0, 234, 0.1); /* Leichter Akzent Hintergrund */
}





/* ---------------------------------------------------------------------
   ------------ addprod ------------
   --------------------------------- */

.form-container {
    padding: 20px;
    max-width: 600px; /* Auf Tablets/Desktop nicht zu breit */
    margin: 0 auto;
}

.form-group {
    margin-bottom: 12px !important;
    display: flex;
    flex-direction: column;
}

.form-group.center {
    align-items: center;
}

/* Row für Anzahl/Einheit */
.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 12px !important;
}

.grow-1 {
    flex: 1;
}

/* Labels */
.input-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    margin-left: 4px;
    font-weight: 600;
}

/* Generelle Input Felder */
.input-field {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 15px;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    width: 100%;
    box-shadow: var(--shadow);
}

.input-field:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(98, 0, 234, 0.2);
}

/* Spezielle Inputs */
.input-field.large-text {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 18px;
}

.input-field.price-input {
    font-size: 1.2rem;
    color: var(--price-color);
    font-weight: bold;
}

/* Image Upload Styling */
.image-upload-label {
    width: 120px;
    height: 120px;
    background-color: var(--card-bg);
    border: 2px dashed var(--border-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s;
    overflow: hidden; /* Damit Bild nicht übersteht */
    position: relative;
}

.image-upload-label:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: rgba(98, 0, 234, 0.05);
}

.image-upload-label .material-icons {
    font-size: 40px;
    margin-bottom: 5px;
}

.upload-text {
    font-size: 0.8rem;
}

/* Wenn ein Bild gewählt wurde (Klasse wird per JS gesetzt) */
.image-upload-label.has-image {
    border-style: solid;
    padding: 0;
}

.image-upload-label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Speichern Button im Footer */
.sticky-footer {
    justify-content: center; /* Button mittig */
    align-items: center;
    background-color: var(--bg-color); /* Footer Hintergrund */
    padding-bottom: 20px;
}

.save-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 400px;
    justify-content: center;
}

.save-btn:active {
    transform: scale(0.98);
}


/* ---------------------------------------------------------------------
    --- Custom Dropdown Styles --- */

.custom-dropdown {
    position: relative; /* Wichtig für die Positionierung der Liste */
    width: 100%;
}

.dropdown-options {
    position: absolute;
    top: 105%; /* Ein kleines bisschen Abstand nach unten */
    left: 0;
    width: 100%;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 50; /* Über anderen Elementen schweben */
    
    /* Animation beim Einblenden */
    display: none; 
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s;
}

/* Klasse zum Anzeigen (wird per JS gesetzt) */
.dropdown-options.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-options li {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.dropdown-options li:last-child {
    border-bottom: none;
}

.dropdown-options li:hover {
    background-color: var(--bg-color); /* Hover Effekt */
    color: var(--accent-color);
}



/* --- Styles für das kleine Anzahl-Feld --- */

.qty-input {
    width: 70px; /* Festbreite für ca. 2 Ziffern */
    text-align: center;
    padding-left: 5px;  /* Padding anpassen damit Text mittig wirkt */
    padding-right: 5px;
}

.center-text {
    text-align: center;
}

/* Entfernt die kleinen Pfeile (Spinner) im Input-Feld bei Chrome/Safari/Edge */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Entfernt die Pfeile bei Firefox */
input[type=number] {
  -moz-appearance: textfield;
}




/* --- ------------------------------------------
   -------- addcustprod advanced settings ---  /
   ------------------------------------------*/

.toggle-advanced-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 15px 0;
    transition: color 0.3s;
    outline: none;
}

.toggle-advanced-link:hover {
    color: var(--accent-color);
}

.arrow-icon {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

/* Der Container für die Optionen */
.advanced-options-container {
    max-height: 0; /* Standardmäßig zugeklappt */
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* Klasse für den "Offen"-Zustand (wird per JS gesetzt) */
.advanced-options-container.open {
    max-height: 500px; /* Genug Platz für den Inhalt */
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 20px; /* Etwas Platz zum Footer */
    margin-top: 10px;
}

/* Wenn offen, Pfeil drehen */
.toggle-advanced-link.active .arrow-icon {
    transform: rotate(180deg);
}



/* --- ------------------------------------------
   ------------ KACHELN html ----------------  /
   ------------------------------------------*/
/* --- KACHELN (Grid Layout) --- */

.tile-grid {
    display: grid;
    gap: 15px;
    padding: 10px 15px 100px 15px;
    
    /* Standard (Mobile): 2 Spalten */
    grid-template-columns: repeat(2, 1fr); 
}

/* Tablet */
@media (min-width: 600px) {
    .tile-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Laptop / Kleiner Desktop */
@media (min-width: 900px) {
    .tile-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Standard Desktop (Full HD Bereich) */
@media (min-width: 1400px) {
    .tile-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Widescreen */
@media (min-width: 1900px) {
    .tile-grid { grid-template-columns: repeat(8, 1fr); }
}

/* 4K / Ultra Wide */
@media (min-width: 2500px) {
    .tile-grid { grid-template-columns: repeat(12, 1fr); }
}


/* Die Kachel selbst */
.tile-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Aspect Ratio erzwingen, damit alle gleich hoch wirken */
    min-height: 220px; 
    transition: transform 0.2s;
}

.tile-card:active {
    transform: scale(0.98);
}

.tile-img {
    width: 100%;
    height: 120px; /* Feste Höhe für Bild */
    object-fit: cover;
}

.tile-content {
    padding: 10px;
    flex: 1; /* Füllt den Rest */
    display: flex;
    flex-direction: column;
}

.tile-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 2px;
    line-height: 1.2;
}

.tile-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.tile-price {
    /* Preis rechts unten im Container fixieren */
    margin-top: auto; /* Drückt es nach unten */
    align-self: flex-end; /* Drückt es nach rechts */
    font-weight: bold;
    color: var(--price-color);
    font-size: 1.1rem;
}

/* --- Settings Button (Links Unten) --- */
.page-settings-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1001;
}

.fab-settings {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fab-settings:hover {
    background-color: var(--bg-color);
}

/* --- Settings Menü (Popup) --- */
.settings-menu {
    position: absolute;
    bottom: 60px; /* Über dem Button */
    left: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    padding: 10px;
    width: 150px;
    display: none; /* Versteckt */
    flex-direction: column;
    gap: 5px;
}

.settings-menu.open {
    display: flex;
}

.menu-header {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

.setting-option {
    background: none;
    border: none;
    padding: 8px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9rem;
}

.setting-option:hover {
    background-color: rgba(128,128,128,0.1);
}

.setting-option.active {
    background-color: var(--accent-color);
    color: white;
}


/* -------------------------------------------------
   --- Manuelle Spaltensteuerung (Overrides) --- */

.tile-grid.force-1 { grid-template-columns: 1fr !important; }
.tile-grid.force-2 { grid-template-columns: repeat(2, 1fr) !important; }
.tile-grid.force-3 { grid-template-columns: repeat(3, 1fr) !important; }
.tile-grid.force-4 { grid-template-columns: repeat(4, 1fr) !important; }
.tile-grid.force-6 { grid-template-columns: repeat(6, 1fr) !important; }
.tile-grid.force-8 { grid-template-columns: repeat(8, 1fr) !important; }
.tile-grid.force-12 { grid-template-columns: repeat(12, 1fr) !important; }

/* Damit die Kacheln bei 4 Spalten auf kleinen Handys nicht kaputt gehen,
   verringern wir das Padding/Schriftgröße etwas, wenn man viele Spalten erzwingt */
.tile-grid.force-4 .tile-card,
.tile-grid.force-3 .tile-card {
    min-height: 180px; /* Etwas kompakter */
}

.tile-grid.force-4 .tile-img,
.tile-grid.force-3 .tile-img {
    height: 80px; /* Kleineres Bild */
}

.tile-grid.force-4 .tile-title,
.tile-grid.force-3 .tile-title {
    font-size: 0.85rem; /* Kleinere Schrift */
}

/* --- Style Anpassungen für hohe Dichte (ab 6 Spalten) --- */
/* Wenn man 6, 8 oder 12 Spalten erzwingt, muss der Inhalt kompakter werden */

.tile-grid.force-6 .tile-card,
.tile-grid.force-8 .tile-card,
.tile-grid.force-12 .tile-card {
    min-height: 160px; /* Sehr kompakt */
}

.tile-grid.force-6 .tile-img,
.tile-grid.force-8 .tile-img,
.tile-grid.force-12 .tile-img {
    height: 70px; /* Kleines Bild */
}

.tile-grid.force-6 .tile-title,
.tile-grid.force-8 .tile-title,
.tile-grid.force-12 .tile-title {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-grid.force-6 .tile-desc,
.tile-grid.force-8 .tile-desc,
.tile-grid.force-12 .tile-desc {
    display: none; /* Beschreibung ausblenden bei so vielen Kacheln */
}

.tile-grid.force-6 .tile-price,
.tile-grid.force-8 .tile-price,
.tile-grid.force-12 .tile-price {
    font-size: 0.9rem;
}


/* ------------------------------------------
   --- Styles für die Vorschlagsliste --- */

.suggestions-list-wrapper {
    padding: 0 5px 15px 5px;
}

.suggestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.suggestion-item:active {
    transform: scale(0.98);
    background-color: var(--bg-color);
}

/* Linke Seite: Name und Markt */
.sugg-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sugg-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.sugg-market {
    font-size: 0.75rem;
    color: white;
    background-color: var(--text-secondary); /* Grauer Badge */
    padding: 2px 6px;
    border-radius: 4px;
    align-self: flex-start; /* Nicht über ganze Breite strecken */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Rechte Seite: Menge/Einheit und Preis */
.sugg-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.sugg-qty {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sugg-price {
    font-weight: bold;
    color: var(--price-color);
    font-size: 1rem;
}

/* State für leere Liste */
.no-suggestions {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 10px;
    font-size: 0.9rem;
}


/* ---------------------------------------------
   --------- Preisbereich Anpassungen ------ */

/* Der Container für Preis + Tag */
.price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Rechtsbündig */
    justify-content: center;
    margin-left: 10px;
    min-width: 80px; /* Damit es nicht springt */
}

/* Der kleine Tag unter/über dem Preis */
.price-info-tag {
    font-size: 0.65rem;
    background-color: var(--border-color); /* Dezent, passend zum Theme */
    color: var(--text-secondary);
    padding: 2px 5px;
    border-radius: 4px;
    margin-top: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Kein Umbruch */
}

/* Anpassung: Falls item-price im Wrapper liegt, margin entfernen */
.price-wrapper .item-price {
    margin-left: 0;
}

/* Dunkelmodus Anpassung für besseren Kontrast */
body.dark-theme .price-info-tag {
    background-color: rgba(255,255,255,0.1);
    color: #ccc;
}


/* ------------------------------------------------------
   ------------- Styles für menusample.html -----------
   ----------------------------------------------   */

/* Content Container */
.content-container {
    padding: 20px;
    padding-bottom: 100px; /* Platz für Bottom Nav */
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.content-container h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--accent-color);
}

/* Header Rechts Container */
.header-right {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative; /* Für Dropdown Positionierung */
}

/* --- 1. ASIDE MENU (Links) --- */
.side-menu {
    position: fixed;
    top: 0;
    left: -300px; /* Versteckt */
    width: 280px;
    height: 100%;
    background-color: var(--card-bg);
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
    z-index: 2000;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.side-menu.open {
    left: 0;
}

.side-menu-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.side-nav {
    padding: 10px 0;
    flex: 1;
    overflow-y: auto;
}

.side-link {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
}

.side-link:hover {
    background-color: var(--bg-color);
    color: var(--accent-color);
}

.side-link .material-icons {
    margin-right: 15px;
    color: var(--text-secondary);
}

.menu-divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 10px 0;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}

.menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- 2. EXTRA MENU (Rechts oben) --- */
.dropdown-menu {
    position: absolute;
    top: 110%;
    right: 0;
    width: 250px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    padding: 15px;
    display: none; /* Versteckt */
    z-index: 1500;
    flex-direction: column;
}

.dropdown-menu.show {
    display: flex;
}

.dropdown-menu h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 5px;
    display: inline-block;
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.simple-table th, .simple-table td {
    border: 1px solid var(--border-color);
    padding: 6px;
    font-size: 0.85rem;
    text-align: left;
}

.simple-table th {
    background-color: var(--bg-color);
}

.menu-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.menu-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.menu-links a {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
}

/* --- 3. PAGE FOOTER --- */
.page-footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    margin-top: 30px;
}

/* --- 4. BOTTOM NAVIGATION BAR --- */
.bottom-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--card-bg);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 1100;
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative; /* Für Submenüs */
}

.nav-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}

.nav-btn:hover, .nav-btn:active {
    color: var(--accent-color);
}

.nav-label {
    font-size: 0.9rem;
    margin-top: 2px;
}

/* Großer Button in der Mitte */
.nav-btn.big-fab {
    background-color: var(--accent-color);
    color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    justify-content: center;
    transform: translateY(-20px); /* Herausstehend */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.nav-btn.big-fab:active {
    transform: translateY(-20px) scale(0.95);
}

/* Submenüs (Bottom) */
.bottom-submenu {
    position: absolute;
    bottom: 80px; /* Über der Bar */
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
    
    /* Animation */
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: all 0.2s ease-out;
    border: 1px solid var(--border-color);
}

/* Spezifische Positionierung */
.nav-group.left .bottom-submenu { left: 0; }
.nav-group.right .bottom-submenu { right: 0; }
.nav-group.center .bottom-submenu.center-pop {
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0.9);
}

.bottom-submenu button {
    background: none;
    border: none;
    padding: 10px;
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}

.bottom-submenu button:hover {
    background-color: var(--bg-color);
}

/* Sichtbar machen */
.bottom-submenu.active {
    opacity: 1;
    pointer-events: auto;
}

/* Korrektur für Center Animation */
.nav-group.center .bottom-submenu.center-pop.active {
    transform: translateX(-50%) translateY(0) scale(1);
}

.nav-group.left .bottom-submenu.active,
.nav-group.right .bottom-submenu.active {
    transform: translateY(0) scale(1);
}


/* --- 5. TOAST NOTIFICATIONS --- */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    max-width: 400px;
    pointer-events: none; /* Klicks gehen durch leeren Bereich */
}

.toast {
    background-color: #323232;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    
    /* Animation */
    animation: slideInDown 0.4s ease forwards;
    pointer-events: auto;
    border-left: 5px solid var(--accent-color);
}

.toast.success { border-left-color: #4caf50; }
.toast.warning { border-left-color: #ff9800; }
.toast.error { border-left-color: #f44336; }
.toast.info { border-left-color: #2196f3; }

.toast.fade-out {
    animation: fadeOutUp 0.4s ease forwards;
}

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutUp {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}


/* -------------------------------------------------------
   ------------- Styles für Benachrichtigungen ----------
   -------------------------------------------------- */

/* Relative Positionierung für den Button, damit der Badge sitzt */
.icon-btn.relative {
    position: relative;
}

/* Der rote Punkt (Badge) */
.badge-count {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #f44336; /* Rot */
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--bg-color); /* Kleiner Rand zur Abgrenzung */
}

/* Das Menü selbst */
.notification-dropdown {
    width: 340px; /* Breit genug für Desktop */
    padding: 0;   /* Padding regeln wir innen */
    max-height: 80vh; /* Scrollbar wenn zu viele Nachrichten */
    overflow-y: auto;
}

/* Header im Menü */
.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg);
    position: sticky;
    top: 0;
}

.notif-header h3 {
    margin: 0;
    font-size: 1rem;
    border: none;
    padding: 0;
}

.mark-read-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 600;
}

/* Liste */
.notif-list {
    display: flex;
    flex-direction: column;
}

/* Einzelnes Item */
.notif-item {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background-color: var(--bg-color);
}

/* Ungelesene Nachrichten hervorheben */
.notif-item.unread {
    background-color: rgba(98, 0, 234, 0.05); /* Hauch von Accent Farbe */
    border-left: 3px solid var(--accent-color);
}

/* --- Typografie im Item --- */

/* Titel & Zeit Zeile */
.notif-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.notif-title {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.notif-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Text Inhalt */
.notif-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Footer (Autor) */
.notif-footer {
    display: flex;
    justify-content: flex-end;
}

.notif-author {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-color);
    padding: 2px 6px;
    border-radius: 4px;
}


/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 480px) {
    .notification-dropdown {
        /* Auf Handy fast volle Breite */
        width: 85vw; 
        /* Positionierung anpassen, damit es nicht rechts rausragt */
        right: -50px; 
    }
    
    .notif-item {
        padding: 18px 15px; /* Etwas mehr Touch-Fläche */
    }
    
    .notif-title {
        font-size: 1rem; /* Größer für Lesbarkeit */
    }
    
    .notif-text {
        font-size: 0.95rem;
    }
}

/* ------------------------------------------------------------
   ------------------ LOGIN PAGE STYLES ----------------------
   -----------------------------------------------------   */

/* Body speziell für Login: Volle Höhe, Zentriert */
.login-body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
    padding: 20px;
}

.login-theme-btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* Wrapper für vertikale Ausrichtung von Card und Footer */
.login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

/* Die Karte */
.login-card {
    background-color: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Etwas stärkerer Schatten */
    padding: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    overflow: hidden; /* Für Animationen */
}

/* Logo Bereich */
.logo-area {
    text-align: center;
    margin-bottom: 10px;
}

.app-logo {
    border-radius: 50%; /* Rundes Logo */
    margin-bottom: 15px;
    box-shadow: var(--shadow);
}

.logo-area h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
}

.login-intro {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* --- Buttons --- */
.login-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    margin-bottom: 12px;
    color: white;
}

.login-btn:active {
    transform: scale(0.98);
}

/* Google Style */
.login-btn.google {
    background-color: #DB4437; /* Google Rot */
    color: white;
}
.brand-icon {
    font-family: serif;
    font-weight: bold;
    background: white;
    color: #DB4437;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

/* Email Style */
.login-btn.email {
    background-color: var(--text-primary); /* Dunkel/Hell angepasst */
    color: var(--bg-color); /* Invers */
}

/* Extra Style */
.login-btn.extra {
    background-color: var(--accent-color);
}

/* Outline (Register) Style */
.login-btn.outline {
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    margin-bottom: 0;
}

.login-btn.outline:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* --- Sections & Animation --- */
.login-section {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hilfsklasse zum Ausblenden */
.hidden {
    display: none !important;
}

/* --- Form View --- */
.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.form-header .back-btn {
    margin-right: 15px;
    background-color: var(--bg-color);
}

.form-header span {
    font-weight: bold;
    font-size: 1.1rem;
}

.forgot-pw {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.user-avatar-placeholder {
    text-align: center;
    margin-bottom: 15px;
}
.user-avatar-placeholder .material-icons {
    font-size: 60px;
    color: var(--text-secondary);
}

/* Trenner */
.divider {
    text-align: center;
    margin: 10px 0;
    position: relative;
}

.divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    z-index: 1;
}

.divider span {
    background-color: var(--card-bg);
    padding: 0 10px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    position: relative;
    z-index: 2;
}

/* --- Footer --- */
.login-footer-links {
    margin-top: 30px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.login-footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.login-footer-links a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.sep {
    margin: 0 5px;
    opacity: 0.5;
}



/* ----------------------- Quick Add im FAB Menü ------------------ */

.quick-add-row {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--card-bg);
    padding: 5px;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    margin-bottom: 5px;
    width: 200px; /* Breite festlegen damit es gut aussieht */
}

.quick-input {
    border: none;
    background: transparent;
    padding: 8px 10px;
    font-size: 1.15rem;
    color: var(--text-primary);
    flex: 1;
    outline: none;
    min-width: 0; /* Damit Flexbox nicht sprengt */
}

.quick-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.quick-btn:active {
    transform: scale(0.9);
}

.quick-btn .material-icons {
	font-size: 1.45rem;
    /*font-size: 16px;*/
}


/* --- Mobile Anpassung für offenes Menü (Full Width Input) --- */

@media (max-width: 640px) {
    
	.fab-options {
		bottom: 90px; /* Über dem Hauptbutton */
	}
	
    /* 1. Gesamtpreis ausblenden, wenn Menü offen ist */
    .bottom-controls.expanded-mode .total-display {
        display: none;
    }

    /* 2. Wrapper auf volle Breite strecken */
    .bottom-controls.expanded-mode .fab-wrapper {
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px; /* Padding wie der Footer Container */
        justify-content: space-between; /* Input links, Button rechts */
        background: linear-gradient(to top, var(--bg-color) 80%, transparent); /* Optional: Hintergrund damit nichts durchscheint */
    }

    /* 3. Input Zeile füllt den Platz */
    .bottom-controls.expanded-mode .quick-add-row {
        width: auto; /* Breite resetten */
        flex: 1;     /* Nimm den restlichen Platz */
        margin-right: 15px; /* Abstand zum FAB Button */
    }
}


/* --------------------------------------------------------------
   --------------- Live-Vorschläge für Quick Add ------------ */

.quick-suggestions-container {
    position: absolute;
    bottom: 60px; /* Knapp über der Input-Zeile */
    right: 50px;  /* Rechtsbündig zum Input-Ende (ohne Button) */
    width: 240px; /* Passend zur Input-Breite */
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: none; /* Standardmäßig versteckt */
    flex-direction: column;
    overflow: hidden;
    z-index: 1005; /* Über den FAB Options */
}

/* Wenn Vorschläge da sind */
.quick-suggestions-container.show {
    display: flex;
    animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.quick-sugg-item {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.quick-sugg-item:last-child {
    border-bottom: none;
}

.quick-sugg-item:hover, .quick-sugg-item:active {
    background-color: var(--bg-color);
}

.qs-left {
    display: flex;
    flex-direction: column;
}

.qs-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-primary);
}

.qs-info {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.qs-price {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--price-color);
}

/* --- Mobile Anpassung (Expanded Mode) --- */
@media (max-width: 600px) {
    /* Wenn das Menü offen ist, müssen die Vorschläge breiter sein */
    .bottom-controls.expanded-mode .quick-suggestions-container {
        width: auto;
        left: 20px;
        right: 80px; /* Platz lassen für den FAB Button rechts */
        bottom: 80px;
    }
}


/* --------------------------------------------------------------------
   ---------------------- Inline Editing Styles ------------------- */

.edit-input {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--text-primary);
    background-color: var(--bg-color);
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    padding: 2px 5px;
    width: 100%;
    min-width: 60px; /* Damit man es sieht */
    outline: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Anpassung für Preis-Input */
.edit-input.price-edit {
    color: var(--price-color);
    text-align: right;
    width: 80px;
}

/* ----------------------- Anzahl & Titel Layout ---------------- */

.title-row {
    display: flex;
    align-items: baseline; /* Text auf gleicher Linie */
    gap: 6px; /* Abstand zwischen "1x" und "Produktname" */
}

.item-qty {
    font-weight: 800;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 1.1rem; /* Gleiche Größe wie Titel */
    white-space: nowrap;
}

.item-qty:hover {
    text-decoration: underline;
}

/* Spezielles Input Feld für die Anzahl */
.edit-input.qty-edit {
    width: 50px;
    text-align: center;
    margin-right: 5px;
    font-weight: bold;
    color: var(--accent-color);
}


/* -----------------------------------------------------------------
   -------------------- Gewicht & Einheit Zeile ---------------- */

.weight-row {
    display: flex;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.weight-val, .weight-unit {
    cursor: pointer;
    border-bottom: 1px dotted transparent; /* Dezent andeuten */
    transition: border-color 0.2s, color 0.2s;
}

.weight-val:hover, .weight-unit:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

/* Spezielle Inputs für das Inline-Editing dieser Felder */
.edit-input.weight-edit {
    width: 60px;
    font-size: 0.85rem;
    padding: 1px 4px;
}

.edit-input.unit-edit {
    width: 60px;
    font-size: 0.85rem;
    padding: 1px 4px;
}


/* ----------------------- Gewichtsanzeige im Footer --------------------- */

.total-weight-display {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
    font-weight: 600;
    /*text-align: right;
    width: 100%;
    display: inline;*/
	white-space: nowrap; /* Verhindert Zeilenumbruch */
}

/* Dunkelmodus Anpassung */
body.dark-theme .total-weight-display {
    color: #888;
}