/* =============================================================================
   GAST.CSS – Aussehen der Gast-Bestellseite (gast.html)
   Kopf, Speisekarte, Überschriften (aufklappbar), Status-Anzeige, Bestellzeiten-Tabelle.
   Weitere Dateien: warenkorb.css (Warenkorb + Fenster), selectionModal.css (Auswahl-Fenster),
   chooseModal.css (Pizza-Fenster). Viele Farben stehen auch direkt in gast.html (style="...").
   ============================================================================= */
/*07.10.26 Zeit*/
/* Styling für die 3 Header-Ebenen */

/* Wenn das Details-Element GESCHLOSSEN ist -> Zeige Pfeil rechts */
details:not([open]) > summary .header-arrow::before {
    content: "▶";
}

/* Wenn das Details-Element OFFEN ist -> Zeige Pfeil nach unten */
details[open] > summary .header-arrow::before {
    content: "▼";
}

.menu-header-1 {
    background-color: #3498db;
    color: white;
    font-size: 1.3rem;
    padding: 12px 15px;
    margin-top: 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-header-2 {
    background-color: #27ae60;
    color: white;
    font-size: 1.1rem;
    padding: 10px 15px;
    margin-top: 10px;
    margin-left: 10px; /* Leicht eingerückt */
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-header-3 {
    background-color: #8e44ad;
    color: white;
    font-size: 1.0rem;
    padding: 8px 15px;
    margin-top: 8px;
    margin-left: 20px; /* Stärker eingerückt */
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Pfeil-Indikator */
.header-toggle-icon {
    transition: transform 0.3s ease;
    font-weight: bold;
}
.header-closed .header-toggle-icon {
    transform: rotate(-90deg); /* Dreht den Pfeil nach links, wenn eingeklappt */
}

/* Container für untergeordnete Elemente */
.header-content-group {
    transition: all 0.3s ease-out;
}
.header-closed + .header-content-group {
    display: none; /* Versteckt den Inhalt, wenn der Header geschlossen ist */
}





/* Styling für die Wartezeit-Auswahl */
.pickup-time-section {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pickup-label {
    font-size: 0.75rem;
    color: #aaa;
    font-weight: bold;
    text-transform: uppercase;
}

.pickup-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.btn-wait-step {
    background: #333;
    color: #fff;
    border: 1px solid rgb(141,44,41);
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.btn-wait-step:disabled {
    opacity: 0.3;
    border-color: #444;
    cursor: not-allowed;
}

.pickup-display-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#pickup-time-clock {
    font-size: 1.1rem;
    font-weight: bold;
    color: #00ca4e;
}

#pickup-time-minutes {
    font-size: 0.7rem;
    color: #888;
}

/*Ende 07.10.26 Zeit*/


       
:root {
    /* Variablen müssen immer mit zwei Bindestrichen -- beginnen */
    --pizzeria-rot: rgb(154, 9, 35);  
    --gold-akzent: #ffcc00;
    --hintergrund-dunkel: #262626;
    --text-weiss: #ffffff;
	--sn:  rgb(141,44,41);/*rgb(154,9,35);/*Schrift name*/
	--sd: /*desc*/
	--sp: /*plus*/
	--sq: /*qty*/
	--sw:/*without*/
	--se:/*extrass*/
	--bp: /*backgroung plus*/
	--bh: /*background hinzufügen Übernehmen abschicken*/
	--WebSis: rgb(141,44,41) /*Webseite Sisinius*/
}

#pizzeria {
    color: var(--pizzeria-rot);
}


	   /* 1. GRUND-LAYOUT */
        html, body {
            margin: 0;
            padding: 0;
            /*height: 100%;
            width: 100%;*/
            background-color: #1a1a1a;
            color: #ffffff;
            /*font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;*/
            overflow: hidden;
			
			
            font-family: sans-serif;
            background-color: #333;
        }




	/* Neu: Der Wrapper übernimmt das Scrollen */
	#main-scroll-wrapper {
		height: 100vh;
		overflow-y: auto;
		background-color: #1a1a1a;
	}


        /* 2. DER SCROLL-CONTAINER (KOMPAKTER) */
        #menu-container {
            /*height: 100vh;*/
            /*overflow-y: auto;*/
            padding: 8px; /* Weniger Außenabstand */
            display: flex;
            flex-direction: column;
            gap: 6px;    /* Halbiert: Abstand zwischen den Gerichten */
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        /* 3. DAS ITEM-DESIGN (FLACHER) */
        .item {
            background: #262626;
            color: #ffffff;
            border-radius: 8px;
            padding: 8px 12px; /* Reduziert von 15px */
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*border-left: 4px solid #00aaff;*/
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        /* 4. TEXT-STYLING (KOMPAKTER) */
        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .item-name {
            color: white;
            font-size: 1rem; /* Leicht verkleinert */
            font-weight: bold;
            margin: 0;
        }

        .item-desc {
            color: #aaaaaa;
            font-size: 0.75rem; /* Kleinerer Text */
            line-height: 1.1;
            margin: 2px 0;
            max-width: 180px; /* Begrenzt, damit Buttons Platz haben */
        }

        .item-price {
            color: var(--sn);/* rgb(154,9,35);/*#90292C;*//*rgb(2,202,78);*/
            font-weight: bold;
            font-size: 0.9rem;
            margin: 0;
        }

        /* 5. STEUERUNG (KLEINER) */
        .qty-wrapper {
            display: flex;
            align-items: center;
            background: #333333;
            border-radius: 6px;
            padding: 2px;
            gap: 6px;
        }

        .btn-plus, .btn-minus {
            background: rgb(0,123,255);
            color: white;
            border: none;
            width: 32px;  /* Verkleinert von 38px */
            height: 32px; /* Verkleinert von 38px */
            border-radius: 4px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-minus {
		    background: rgb(68,68,68);
		}
        .qty-display {
            color:   var(--sn);
            font-weight: bold;
            min-width: 18px;
            text-align: center;
            font-size: 1rem;
        }

        /* KATEGORIE ÜBERSCHRIFTEN (FLACHER) */
        .menu-category-header {
            padding: 10px 0 2px 4px; /* Deutlich weniger Platzverschwendung */
        }

        .header-title {
            color:   var(--sn);
            font-size: 1.1rem;
            text-transform: uppercase;
            margin: 0;
            letter-spacing: 0.5px;
        }
		
		
		#status-quadrat {
    transition: background-color 0.5s ease; /* Weicher Farbübergang */
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* =========================================================
   SPEISERKARTEN-SPERRE (Z.B. BEI BESTELLSTOPP ODER GESCHLOSSEN)
   ========================================================= */

/* Deaktiviert nur den Plus-Button, wenn das Menü gesperrt ist */
.menu-disabled .btn-plus {
    opacity: 0.3;
    pointer-events: none; /* Verhindert Klicks vollständig */
    filter: grayscale(1);
    cursor: not-allowed;
}

/* Deaktiviert den Minus-Button, wenn die Menge 0 ist (Standardverhalten) */
.btn-minus:disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}



/* Optional: Ein leichtes Pulsieren, wenn offen ist */
.pulsieren {
    animation: status-puls 2s infinite;
}

@keyframes status-puls {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.status-green { background-color: #2ecc71; color: white; } /* Offen */
.status-orange { background-color: #f39c12; color: white; } /* Countdown läuft */
.status-red { background-color: #e74c3c; color: white; } /* Geschlossen */

.status-box {
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    transition: all 0.5s ease;
}


/* Erzeuge einen Puffer am Ende des Scroll-Bereichs */
#main-scroll-wrapper {
    height: 100vh;
    overflow-y: auto;
    /* Ein satter Abstand unten, damit URL-Leisten nichts verdecken */
    padding-bottom: 30px !important; 
    box-sizing: border-box;
}

/* Container für die Öffnungszeiten */
.oeffnungszeiten-container {
    width: 100%;
    max-width: 100vw; /* Verhindert das Überbreite-Scrollen */
    box-sizing: border-box;
    padding: 10px;    /* Kleinerer Innenabstand */
    margin-top: 5px;  /* Verringert Abstand nach oben zum Menü */
	margin-bottom: 0px;
}

/* Die Überschrift "Takeaway Bestellzeiten" */
#titel-bestelleiten {
    margin-top: 0;     /* Entfernt den Standard-Abstand oben */
    margin-bottom: 5px; /* Verringert Abstand zur Tabelle (Sonntag etc.) */
    font-size: 1.1rem;
}

/* Die Tabelle selbst */
#zeiten-tabelle {
    width: 100%;       /* Nutzt genau die Containerbreite */
    table-layout: fixed; /* Zwingt die Tabelle, nicht überzulaufen */
    border-collapse: collapse;
}

#zeiten-tabelle td {
    padding: 4px 2px;  /* Engere Zeilenabstände */
    font-size: 0.9rem;
}

.heute-markiert {
    background-color: #fff9c4; /* Leichtes Gelb für heute */
    font-weight: bold;
}



.btn-disabled {
    opacity: 0.3;
    pointer-events: none; /* Macht den Button unklickbar */
    filter: grayscale(1);
}