/* =========================================================================
   Speisekarten-Politur (Kundenseite)
   Rein optische Verbesserungen für die Menü-Ansicht (Kategorie-Leiste,
   Gerichte-Karten, Rabatt-/Beliebt-Badges, "Bestellung ansehen"-Balken).
   Ändert bewusst kein bestehendes Markup/Verhalten - nur Aussehen.
   ========================================================================= */

/* ---------- Kategorie-Leiste oben (Swiper: SUPPEN / Salat / ...) ---------- */
#resMobilemenu{
	box-shadow:0 2px 10px rgba(20,20,43,.05);
	border-bottom:1px solid #f1f1f3;
	padding:4px 0 !important;
}
#resMobilemenu .swiper-slide a{
	font-weight:600;
	color:#5b5f6d;
	letter-spacing:.2px;
	transition:color .15s ease;
	border-radius:10px;
}
#resMobilemenu .swiper-slide a:hover{
	color:#202125;
	background:#fbf7f2;
}
#resMobilemenu a.categories__list__active{
	color:#f46e07 !important;
	border-bottom:3px solid #f46e07;
	font-weight:700;
}
#resMobilemenu .swiper-slide a img{
	filter:grayscale(15%);
	margin-inline-start:4px;
}

/* ---------- Rabatt-Hinweis-Banner ("X% Rabatt bei Direktbestellung") ---------- */
.pt-savings-banner{
	border-radius:14px;
	box-shadow:0 4px 16px rgba(180,33,47,.08);
}
.pt-savings-banner{
	border-radius:12px;
	box-shadow:0 4px 16px rgba(180,33,47,.08);
	padding:.7rem .9rem !important;
	gap:.65rem !important;
}
.pt-savings-icon{
	width:2.1rem !important;
	height:2.1rem !important;
	font-size:1rem !important;
}
.pt-savings-text strong{ font-size:.92rem !important; line-height:1.25; }
.pt-savings-text span{ font-size:.76rem !important; line-height:1.35; }
/* Auf dem Handy bewusst NICHT gestapelt/zentriert (wie vorher), sondern
   weiterhin nebeneinander - spart deutlich Hoehe und wirkt aufgeraeumter. */
@media only screen and (max-width:500px){
	.pt-savings-banner{ flex-direction:row !important; text-align:left !important; }
}
.pt-savings-icon-img{ width:2.1rem !important; height:2.1rem !important; flex:0 0 auto; border-radius:8px; overflow:hidden; }
.pt-savings-icon-img img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Gerichte-Karten ---------- */
.item{
	margin-bottom:18px;
}
.item .item-menu{
	border:1px solid #f0f0f2;
	border-radius:16px;
	box-shadow:0 2px 10px rgba(20,20,43,.045);
	transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
	overflow:hidden;
}
.item:hover .item-menu{
	box-shadow:0 10px 28px rgba(20,20,43,.11);
	border-color:#f7e2cf;
}
.item .item-menu[disabled]{
	box-shadow:none;
}

.item .item-left-part{
	padding:18px 20px;
}
.item-left-inner h3{
	font-size:1.02rem;
	font-weight:700;
	color:#171820;
	letter-spacing:.1px;
}
.item-left-inner p{
	color:#767a89;
	line-height:1.45;
}
.item-price p{
	font-size:1.05rem;
	font-weight:700;
	color:#171820;
}
.discount-price{
	font-weight:400 !important;
	color:#a7abb6 !important;
	text-decoration:line-through;
	font-size:.85em;
	margin-inline-start:4px;
}

/* Bild rechts: sanftere Ecken, dezenter Rahmen, kein hartes Rechteck mehr */
.item-right-inner span{
	border-radius:14px !important;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.item-right-inner img{
	transition:transform .35s ease;
}
.item:hover .item-right-inner img{
	transform:scale(1.06);
}

/* Badges: etwas weicher/konsistenter, mit kleinem Schatten statt platt */
.popular, .discount-badge, .plus-18{
	display:inline-block;
	box-shadow:0 2px 6px rgba(0,0,0,.12);
	vertical-align:middle;
	font-weight:700;
	letter-spacing:.2px;
}
.discount-badge{
	background:linear-gradient(117deg, #d8283a 0%, #b4212f 100%);
}

/* "+"-Button auf dem Bild: sichtbarer, mit leichtem Schatten statt nur
   Hintergrundfarbe, damit er auf jedem Foto gut zu erkennen ist. */
.item .kHKwux{
	box-shadow:0 3px 10px rgba(214,237,249,.9);
}
.item .cart-item{
	box-shadow:0 3px 10px rgba(244,110,7,.35);
}

/* ---------- "Bestellung ansehen" - Balken unten ---------- */
.checkout{
	box-shadow:0 10px 30px rgba(245,110,7,.35);
	font-weight:700;
	letter-spacing:.2px;
}
.total-cart-count{
	font-weight:800;
	box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* ---------- "Ausverkauft"-Kennzeichnung ---------- */
.soldout-badge{
	display:inline-block;
	background:#6c6f7a;
	color:#fff;
	font-weight:700;
	font-size:12px;
	padding:4px 10px;
	border-radius:999px;
	letter-spacing:.2px;
}
/* Wenn ein Artikel ausverkauft ist (oder seine Kategorie gerade nicht
   verfuegbar ist), wird der "+"-Button per [disabled] deaktiviert - dann
   die ganze Karte klar erkennbar ausgrauen, statt dass es wie ein Fehler
   aussieht. */
.item .item-menu:has(button[disabled]){
	opacity:.55;
	filter:grayscale(35%);
}
.item .item-menu:has(button[disabled]) .item-right-inner img{
	transform:none !important;
}

@media only screen and (max-width: 700px){
	.item .item-left-part{ padding:14px 16px; }
	.item-left-inner h3{ font-size:.95rem; }
	.item-price p{ font-size:.98rem; }
	.popular, .discount-badge, .plus-18{ font-size:11px; padding:3px 7px; }
}

/* ---------- Live-Bestellstatus ("Meine Bestellungen") ---------- */
.pt-order-tracker{
	display:flex;
	align-items:flex-start;
	justify-content:center;
}
.pt-tracker-step{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	flex-shrink:0;
}
.pt-tracker-step .dot{
	width:28px;height:28px;border-radius:50%;
	background:#f0f0f2;color:#a4a7b3;
	display:flex;align-items:center;justify-content:center;
	font-size:12px;flex-shrink:0;
	transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.pt-tracker-step.done .dot{background:#2ecc71;color:#fff;}
.pt-tracker-step.active .dot{background:#f46e07;color:#fff;box-shadow:0 0 0 5px rgba(244,110,7,.16);}
.pt-tracker-step .label{font-size:11px;color:#9296a3;white-space:nowrap;}
.pt-tracker-step.active .label{color:#f46e07;font-weight:700;}
.pt-tracker-step.done .label{color:#2ecc71;font-weight:600;}
.pt-tracker-line{flex:1;height:3px;background:#f0f0f2;margin:13px 4px 0;border-radius:2px;min-width:16px;}
.pt-tracker-line.done{background:#2ecc71;}
.pt-order-tracker--problem{color:#b4212f;text-align:center;padding:10px;font-size:13px;line-height:1.5;}

/* Voraussichtliche Ankunftszeit + Countdown unter dem Tracker */
.pt-tracker-eta{
	text-align:center;
	margin-top:14px;
	font-size:13.5px;
	color:#5b5f6d;
	background:#fafbfc;
	border-radius:10px;
	padding:10px 14px;
}
.pt-tracker-eta i{ color:#f46e07; margin-right:6px; }
.pt-tracker-eta-countdown{ color:#9296a3; margin-left:4px; }
.pt-tracker-eta-delay{ display:block; margin-top:4px; color:#c96a00; font-size:12px; }
.pt-order-status-badge .pt-tracker-eta{ display:none; } /* in der Tabellenzelle ("Meine Bestellungen") nicht noetig, nur im Popup */


/* Kompakte Variante fuer die Tabellenzelle in "Meine Bestellungen" */
.pt-order-status-badge{display:inline-block;text-decoration:none;}
.pt-order-status-badge .pt-tracker-step .label{display:none;}
.pt-order-status-badge .pt-tracker-step .dot{width:18px;height:18px;font-size:9px;}
.pt-order-status-badge .pt-tracker-line{margin:8px 2px 0;height:2px;min-width:8px;}
.pt-order-status-badge .pt-order-tracker--problem{font-size:11px;padding:2px 4px;white-space:nowrap;}
.pt-order-status-badge .pt-order-tracker--problem br,
.pt-order-status-badge .pt-order-tracker--problem span{display:none;}

/* Groessere, luftigere Variante im Modal */
#orderTrackModalContent .pt-order-tracker{padding:22px 4px 6px;}
#orderTrackModalContent .pt-order-tracker--problem{font-size:15px;padding:20px 10px;}
#orderTrackModalContent .pt-order-tracker--problem i{font-size:28px;display:block;margin-bottom:8px;}

/* ---------- Kategorien-Popup (☰-Button neben der Kategorie-Leiste) ----------
   Oeffnet eine Liste aller Kategorien von unten (wie ein Bottom-Sheet),
   inkl. kurzer Artikel-Vorschau je Kategorie, zum direkten Anspringen. */
.pt-cat-bar-wrapper{
	position:relative;
	background:#fff;
	display:flex;
	align-items:center;
	min-height:56px;
	overflow:hidden;
}
/* FIX (24.07.2026): Neuer, robusterer Aufbau - Pfeile und Hamburger-Symbol
   liegen jetzt als feste Overlay-Elemente OBEN AUF der Kategorie-Leiste
   (position:absolute, mittig ausgerichtet ueber top:50%), statt als
   normale Nachbar-Elemente in der Zeile. Dadurch gibt es NIE mehr eine
   Ueberlappung, egal wie Swiper seine eigene Breite intern berechnet -
   die Karussell-Leiste selbst bekommt einfach passenden Platz auf der
   rechten (und ggf. linken) Seite freigehalten (padding), und ein sanfter
   weisser Farbverlauf sorgt dafuer, dass der durchscrollende Text nicht
   hart abgeschnitten unter den Symbolen verschwindet. */
#resMobilemenu{
	flex:1 1 auto;
	min-width:0;
	max-width:100%;
	overflow:hidden;
	padding-right:52px;
	/* FIX (24.07.2026): "margin-bottom:20px" (aus einer aelteren, generischen
	   Regel in style.css) hat die Kategorie-Texte optisch nach oben
	   verschoben, wodurch sie nicht mehr auf derselben Hoehe wie die neuen
	   Pfeile/das Hamburger-Symbol standen (die sich an der WIRKLICHEN
	   Boxhoehe orientieren, inklusive diesem unsichtbaren Rand). Hier auf 0
	   gesetzt, nur innerhalb dieser Leiste. */
	margin-bottom:0;
}
.pt-cat-bar-wrapper.pt-has-prev-arrow #resMobilemenu{ padding-left:44px; }
@media (min-width: 768px){
	#resMobilemenu{ padding-right:96px; }
}
/* Links/Rechts-Pfeile fuer die Kategorie-Leiste - vorher war "navigation"
   im Swiper zwar schon konfiguriert (siehe scripts.php), es fehlten aber
   die passenden HTML-Elemente dazu, weshalb nie ein Pfeil zu sehen war.
   Blenden sich von Swiper selbst automatisch aus/an, wenn man am
   Anfang/Ende der Liste angekommen ist. */
.pt-cat-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	/* FIX (24.07.2026): Swiper setzt fuer seine eigenen Pfeil-Buttons
	   standardmaessig ZUSAETZLICH einen "margin-top" zur Mitten-
	   Ausrichtung (unabhaengig von unserer eigenen "transform"-basierten
	   Zentrierung oben) - beide zusammen haben sich aufaddiert und die
	   Pfeile zu weit nach oben verschoben. Hier auf 0 zurueckgesetzt,
	   damit nur noch unsere eigene, saubere Zentrierung gilt (genau wie
	   beim Hamburger-Symbol, das dieses Problem nicht hat, weil es kein
	   Swiper-Element ist). */
	margin-top:0 !important;
	width:36px;
	height:36px;
	border-radius:50%;
	border:1px solid #e4e4e4;
	background:#fff;
	color:#f46e07;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	font-size:14px;
	z-index:2;
}
.swiper-button-prev.pt-cat-arrow{ left:6px; }
.swiper-button-next.pt-cat-arrow{ right:48px; }
@media (min-width: 768px){
	.swiper-button-next.pt-cat-arrow{ right:52px; }
}
.pt-cat-arrow.swiper-button-disabled{
	display:none;
}
.pt-cat-arrow::after{ content:none; } /* Swiper's eigenes Pfeil-Icon per CSS abschalten, wir nutzen Font Awesome */
/* Sanfter weisser Verlauf rechts (und links, wenn der Pfeil dort aktiv
   ist) - der durchlaufende Kategorie-Text "verschwindet" dadurch weich,
   statt hart unter dem Pfeil/Symbol abgeschnitten zu wirken. */
.pt-cat-bar-wrapper::after{
	content:"";
	position:absolute;
	top:0; right:0; bottom:0;
	width:56px;
	background:linear-gradient(to right, rgba(255,255,255,0), #fff 65%);
	pointer-events:none;
	z-index:1;
}
@media (min-width: 768px){
	.pt-cat-bar-wrapper::after{ width:100px; }
}
/* FIX (24.07.2026): Auf dem Handy tippt/wischt man die Kategorie-Leiste
   direkt mit dem Finger durch - die Pfeile brauchen dort niemand und
   nehmen nur wertvollen Platz weg (genau wie bei Lieferando: dort gibt es
   die Pfeile auch nur am Desktop, auf dem Handy verschwinden sie). Das
   Hamburger-Menue-Symbol daneben bleibt auf beiden Groessen erhalten. */
@media (max-width: 767.98px){
	.pt-cat-arrow{ display:none; }
	#resMobilemenu{ padding-right:48px; }
}
/* FIX (24.07.2026): Genau dieselbe Groesse und dieselbe Overlay-Logik wie
   die Pfeile (siehe oben) - dadurch bleibt der Knopf IMMER exakt mittig
   ausgerichtet und ueberlappt nie mehr mit dem Pfeil oder den Kategorien
   dahinter, unabhaengig von deren Breite. */
.pt-cat-menu-btn{
	position:absolute;
	top:50%;
	right:6px;
	transform:translateY(-50%);
	width:36px; height:36px;
	border-radius:50%;
	border:none;
	background:#f46e07;
	color:#fff;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer;
	padding:0;
	box-shadow:0 2px 8px rgba(244,110,7,.35);
	transition:background-color .15s ease, transform .15s ease;
	z-index:2;
}
.pt-cat-menu-btn:hover{
	background:#d65f05;
	transform:translateY(-50%) scale(1.06);
}
.pt-cat-menu-btn svg{ width:16px; height:16px; }

.pt-cat-popup-overlay{
	position:fixed; inset:0; background:rgba(20,20,43,.35);
	z-index:1200; display:none;
}
.pt-cat-popup{
	position:fixed; left:0; right:0; bottom:0;
	max-height:80vh; overflow-y:auto;
	background:#fff;
	border-radius:18px 18px 0 0;
	box-shadow:0 -10px 30px rgba(20,20,43,.2);
	z-index:1201;
	padding:18px 20px 24px;
	display:none;
	transform:translateY(100%);
	transition:transform .25s ease;
}
.pt-cat-popup-overlay.pt-cat-popup-open,
.pt-cat-popup.pt-cat-popup-open{ display:block; }
.pt-cat-popup.pt-cat-popup-open{ transform:translateY(0); }
.pt-cat-popup-handle{
	width:40px; height:4px; border-radius:3px; background:#e2e2e6;
	margin:0 auto 14px;
}
.pt-cat-popup-header{
	display:flex; align-items:center; justify-content:space-between;
	margin-bottom:10px;
}
.pt-cat-popup-header h3{ font-size:20px; font-weight:800; margin:0; }
.CloseBtnCat{
	border:none; background:#f4f4f6; width:32px; height:32px; border-radius:50%;
	font-size:18px; line-height:1; cursor:pointer; color:#333;
}
.pt-cat-popup-row{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 4px; border-bottom:1px solid #f1f1f3;
	cursor:pointer;
}
.pt-cat-popup-row:last-child{ border-bottom:none; }
.pt-cat-popup-row-img{
	width:52px; height:52px; flex:0 0 auto;
	border-radius:12px; overflow:hidden;
	margin-right:14px;
	background:#f4f4f6;
}
.pt-cat-popup-row-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pt-cat-popup-row-text{ flex:1; min-width:0; }
.pt-cat-popup-row-text h4{ font-size:16px; font-weight:700; margin:0 0 4px; }
.pt-cat-popup-row-text p{
	font-size:13px; color:#8b8f9c; margin:0;
	display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
	overflow:hidden;
}
.pt-cat-popup-check{ font-size:16px; color:#2ecc71; display:none; flex:0 0 auto; margin-left:10px; }
.pt-cat-popup-row.active .pt-cat-popup-check{ display:inline-block; }


/* ---------- Mindestbestellwert-Banner im Warenkorb ---------- */
.pt-minorder-banner{
	background:#fff3cd;
	color:#7a5c00;
	border-radius:12px;
	padding:12px 16px;
	margin:0 0 14px;
	font-size:14px;
	line-height:1.4;
}
.pt-minorder-banner b{ font-weight:800; }
.checkout_button.pt-checkout-disabled{
	background:#e2e2e6 !important;
	color:#9296a3 !important;
	cursor:not-allowed !important;
	box-shadow:none !important;
	pointer-events:none;
}

/* ---------- Bestaetigungs-Popup vor dem Bezahlen ("Ihre Artikel von...") ---------- */
.pt-order-confirm-overlay{
	position:fixed; inset:0; background:rgba(20,20,43,.35);
	z-index:1300; display:none;
}
.pt-order-confirm-popup{
	position:fixed; left:0; right:0; bottom:0;
	max-height:80vh; overflow-y:auto;
	background:#fff;
	border-radius:18px 18px 0 0;
	box-shadow:0 -10px 30px rgba(20,20,43,.2);
	z-index:1301;
	padding:18px 20px 20px;
	display:none;
	transform:translateY(100%);
	transition:transform .25s ease;
}
.pt-order-confirm-overlay.pt-open,
.pt-order-confirm-popup.pt-open{ display:block; }
.pt-order-confirm-popup.pt-open{ transform:translateY(0); }
.pt-order-confirm-popup h4{ font-size:20px; font-weight:800; margin:4px 0 14px; }
.pt-order-confirm-restaurant{
	display:flex; align-items:center; gap:12px;
	background:#fafbfc; border-radius:12px; padding:10px 14px; margin-bottom:14px;
}
.pt-order-confirm-restaurant img{ width:40px; height:40px; border-radius:8px; object-fit:cover; }
.pt-order-confirm-restaurant strong{ display:block; font-size:14px; }
.pt-order-confirm-restaurant span{ font-size:12px; color:#8b8f9c; }
.pt-order-confirm-item{
	display:flex; align-items:center; gap:10px;
	padding:10px 2px; border-bottom:1px solid #f1f1f3;
	font-size:14px;
}
.pt-order-confirm-item:last-child{ border-bottom:none; }
.pt-order-confirm-qty{ font-weight:700; color:#5b5f6d; flex:0 0 auto; }
.pt-order-confirm-name{ flex:1; }
.pt-order-confirm-price{ font-weight:700; flex:0 0 auto; }
.pt-order-confirm-btn{ width:100%; margin-top:16px; }

/* ---------- Lieferzeit-Anzeige im Warenkorb ---------- */
.pt-cart-eta-badge{
	display:flex; align-items:center; gap:8px;
	background:#fafbfc; border-radius:12px;
	padding:10px 14px; margin-bottom:14px;
	font-size:13px; font-weight:600; color:#3d3f4d;
}
.pt-cart-eta-badge i{ color:#f46e07; }

/* ---------- Notiz pro Artikel im Warenkorb ---------- */
.pt-item-note-btn{
	border:none; background:none; padding:0; margin-top:2px;
	font-size:12px; font-weight:700; color:#f46e07; cursor:pointer;
}
.cart-item-note{ color:#8b8f9c; }
.pt-item-note-overlay{
	position:fixed; inset:0; background:rgba(20,20,43,.35);
	z-index:1400; display:none;
}
.pt-item-note-popup{
	position:fixed; left:0; right:0; bottom:0;
	background:#fff;
	border-radius:18px 18px 0 0;
	box-shadow:0 -10px 30px rgba(20,20,43,.2);
	z-index:1401;
	padding:18px 20px 22px;
	display:none;
	transform:translateY(100%);
	transition:transform .25s ease;
}
.pt-item-note-overlay.pt-open,
.pt-item-note-popup.pt-open{ display:block; }
.pt-item-note-popup.pt-open{ transform:translateY(0); }
.pt-item-note-head{ display:flex; align-items:center; gap:10px; margin:4px 0 14px; }
.pt-item-note-head i{
	width:30px; height:30px; border-radius:9px; background:#fdeee0; color:#f46e07;
	display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.pt-item-note-popup h4{ font-size:17px; font-weight:800; margin:0; flex:1; }
.pt-item-note-close{
	border:none; background:#f4f5f7; color:#3a3d46;
	width:28px; height:28px; border-radius:50%;
	font-size:18px; line-height:1; cursor:pointer; flex-shrink:0;
}
.pt-item-note-close:hover{ background:#eaebee; }
.pt-item-note-popup textarea{
	width:100%; border:1px solid #e2e2e6; border-radius:12px;
	padding:12px 14px; font-size:14px; resize:none;
	transition:border-color .15s ease;
}
.pt-item-note-popup textarea:focus{ outline:none; border-color:#f46e07; }
.pt-item-note-counter{
	text-align:right; font-size:12px; color:#9296a3; margin-top:6px;
}
.pt-item-note-actions{ display:flex; gap:10px; margin-top:16px; }
.pt-item-note-cancel-btn{
	flex:1; border:1px solid #e2e2e6; background:#fff; color:#3a3d46;
	font-weight:700; font-size:14px; border-radius:12px; padding:12px; cursor:pointer;
}
.pt-item-note-cancel-btn:hover{ background:#f7f7f8; }
.pt-item-note-actions .pt-btn{ flex:1; margin:0; }

/* ---------- Schwebende Warenkorb-Leiste (nur Handy, bereits vorhandenes
   Element .only-mobile-cart in footer.php - blendet sich per JS schon beim
   Scrollen ein/aus, hier nur huebscher gestaltet wie bei Lieferando) ---------- */
.only-mobile-cart{
	z-index:900;
}
/* FIX (29.07.2026): Bei mittleren Bildschirmbreiten (Tablet-Bereich,
   768px-1199px) rutschte die Warenkorb-Leiste manchmal in den normalen
   Seitenfluss statt am Bildschirmrand "kleben" zu bleiben - man musste
   ganz nach unten scrollen, um sie zu finden. Trotz gruendlicher Suche
   liess sich die genaue Ursache nicht zweifelsfrei festnageln (vermutlich
   ein Zusammenspiel mit einem uebergeordneten Element). Deshalb hier zur
   Sicherheit ausdruecklich erzwungen, unabhaengig von der Ursache. */
@media (min-width: 768px) and (max-width: 1199.98px){
	.only-mobile-cart{
		position:fixed !important;
		left:3% !important;
		bottom:3% !important;
		width:94% !important;
		top:auto !important;
		right:auto !important;
	}
	.sidebar-cart-active{
		position:fixed !important;
	}
}
.only-mobile-cart .pt-custom-cart{
	background:#f46e07 !important;
	border-radius:14px;
	box-shadow:0 8px 24px rgba(20,20,43,.25);
	overflow:hidden;
}
.only-mobile-cart .pt-custom-cart a,
.only-mobile-cart .pt-custom-cart > span{
	padding:14px 18px;
	color:#fff !important;
	display:flex !important;
	align-items:center;
	gap:10px;
}
.only-mobile-cart .pt-custom-cart .total-item{
	background:rgba(255,255,255,.25);
	width:26px; height:26px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:13px; font-weight:800; flex:0 0 auto;
}
.only-mobile-cart .pt-custom-cart .view-order{ flex:1; }
/* Solange der Mindestbestellwert nicht erreicht ist: grau statt orange,
   Zeiger statt Hand-Cursor, nicht antippbar (siehe js/custom.js,
   miniCart() - der Klick wird dort bei dieser Klasse ignoriert). Genau wie
   bei Lieferando: erst ab Erreichen des Mindestbestellwerts wird die
   Leiste wieder orange und klickbar. */
.only-mobile-cart .pt-custom-cart.pt-cart-below-minimum{
	background:#9297a3 !important;
	cursor:not-allowed;
}
.only-mobile-cart .pt-custom-cart.pt-cart-below-minimum .view-order{
	font-size:13px;
}
/* Die schwebende Leiste soll wie bei Lieferando NUR erscheinen, wenn
   tatsaechlich etwas im Warenkorb liegt - vorher wurde auch der leere
   Fallback-Text "Scheduled orders only" prominent als orange Leiste
   angezeigt, was wie eine kaputte/verwirrende Meldung wirkte. */
.only-mobile-cart:has(a[data-toggle="modal"]){ display:none !important; }

/* ---------- Öffnungszeiten-Anzeige (oben bei Bewertung/Uhrzeit) ---------- */
.pt-store-status.pt-store-open{ color:#2c4a6b; font-weight:600; }
.pt-store-status.pt-store-closed{
	color:#b4212f;
	font-weight:700;
	background:#fdeeee;
	padding:2px 8px;
	border-radius:6px;
}
/* FIX (24.07.2026): Der doppelte Hinweistext oben ("Das Restaurant ist
   gerade geschlossen...") wurde entfernt (siehe index.php) - diese Pille
   hier ist jetzt die EINZIGE Geschlossen-Anzeige und wurde deshalb etwas
   auffaelliger gemacht (groesser, dickerer Rahmen), damit sie trotzdem
   gut ins Auge faellt. */
.pt-store-status.pt-store-closed{
	font-size:15px;
	padding:6px 14px;
	border:1px solid #f3b9bf;
	display:inline-block;
}

/* ---------- Öffnungszeiten-/Bewertungs-Zeile: auf dem Handy umbrechen
   statt abzuschneiden ---------- */
@media (max-width: 767px){
	.opening ul{flex-wrap:wrap;row-gap:10px}
	.opening li{margin-right:14px}
}

/* Kurzer, zurueckhaltender Hinweis direkt neben der Geschlossen-Pille -
   ersetzt den frueheren, groesseren Absatz ganz oben auf der Seite. */
.pt-preorder-hint{
	display:inline-block;
	margin-left:8px;
	font-size:13px;
	font-weight:400;
	color:#6b6b6b;
	font-style:italic;
}
@media (max-width: 767px){
	.pt-preorder-hint{display:block;margin-left:0;margin-top:4px}
}

/* ---------- Sucheergebnisse ---------- */
.pt-search-results-heading{
	font-size:20px;
	font-weight:800;
	margin-top:10px;
}
.pt-search-results-heading .clear-search{
	color:#f46e07;
	font-weight:700;
	font-size:14px;
	text-decoration:none;
	cursor:pointer;
}
.pt-search-results-heading .clear-search:hover{ text-decoration:underline; }

/* ---------- Sprachauswahl-Globus (oben rechts) ---------- */
.dropbtn{ background:#fdeee0 !important; }
.dropbtn i{ color:#f46e07 !important; }

/* ---------- Kategorien außerhalb ihres Zeitfensters (z.B. Mittagsangebot
   nach 14 Uhr) - werden ans Ende sortiert und leicht abgedunkelt, bleiben
   aber anklickbar/durchstöberbar. ---------- */
#resMobilemenu .scrollsd.pt-cat-unavailable{ opacity:.45; }
.pt-cat-popup-row.pt-cat-unavailable{ opacity:.5; }
.pt-cat-popup-row.pt-cat-unavailable .pt-cat-popup-row-text h4:after{
	content:"· gerade nicht bestellbar";
	font-size:11px;
	font-weight:500;
	color:#b4212f;
	margin-left:6px;
}

/* Artikel-Button ausserhalb des Zeitfensters: sieht deaktiviert aus, ist
   aber klickbar (zeigt ein Erklaerungs-Popup statt einfach nichts zu tun -
   siehe js/custom.js). */
.pt-item-time-restricted{ opacity:.55; cursor:pointer !important; }

/* ---------- Öffnungszeiten-Tabellen (Footer + Info-Popup) ---------- */
.footer-info .info-table,
.info-opentime .info-table{
	width:100%;
	border-collapse:collapse;
	background:#fafbfc;
	border-radius:12px;
	overflow:hidden;
}
.footer-info .info-table tr,
.info-opentime .info-table tr{
	border-bottom:1px solid #eef0f2;
}
.footer-info .info-table tr:last-child,
.info-opentime .info-table tr:last-child{
	border-bottom:none;
}
.footer-info .info-table td,
.info-opentime .info-table td{
	padding:9px 12px;
	font-size:13.5px;
	color:#5b5f6d;
}
.footer-info .info-table tr.pt-today,
.info-opentime .info-table tr.pt-today{
	background:#fdeee0;
}
.footer-info .info-table tr.pt-today td,
.info-opentime .info-table tr.pt-today td{
	color:#202125;
	font-weight:700;
}
.pt-closed-text{ color:#b4212f !important; font-weight:600; }

/* ---------- Checkout-Banner (Kartenbild oben) ---------- */
.checkout-banner img{
	filter: saturate(1.6) contrast(1.08) brightness(1.03);
	/* Vorher gab es hier gar keine Hoehenbegrenzung - auf schmalen
	   Handy-Bildschirmen sah das durch die natuerliche Breite noch
	   proportional aus, auf breiten Desktop-Monitoren wurde die Karte
	   dadurch aber riesig (das Bild hat ein sehr breites Seitenverhaeltnis
	   und wird ueber width:100% einfach mitskaliert). Jetzt gedeckelt auf
	   eine schoene Banner-Hoehe, unabhaengig von der Bildschirmbreite.
	   object-fit:cover schneidet nur die Raender ab, verzerrt aber nichts. */
	width:100%;
	max-height:220px;
	object-fit:cover;
}
@media (min-width: 992px){
	.checkout-banner img{ max-height:260px; }
}

/* ---------- Zahlungsart-Auswahl (kompakt, wie bei Lieferando) ---------- */
.pt-payment-summary{
	display:flex;
	align-items:center;
	gap:10px;
	background:#fafbfc;
	border:1px solid #eef0f2;
	border-radius:12px;
	padding:14px 16px;
	cursor:pointer;
}
.pt-payment-summary-icon{ color:#f46e07; font-size:18px; flex:0 0 auto; }
.pt-payment-summary-text{ flex:1; font-size:14px; color:#3a3d46; }
.pt-payment-summary-text strong{ color:#26282f; }
#pt-payment-change-link{
	color:#f46e07;
	font-weight:700;
	font-size:13px;
	text-decoration:none;
	flex:0 0 auto;
}
#pt-payment-change-link:hover{ text-decoration:underline; }
.pt-payment-options{
	display:none;
	margin-top:10px;
	padding:14px 16px;
	background:#fafbfc;
	border:1px solid #eef0f2;
	border-radius:12px;
}
.pt-payment-options.pt-open{ display:block; }

/* ---------- Öffnungszeiten-Umschaltung im Footer (Lieferservice/Abholung/Restaurant) ---------- */
.pt-hours-tabs{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.pt-hours-tab-link{
	font-size:11.5px;
	padding:4px 9px;
	border-radius:20px;
	border:1px solid #eef0f2;
	color:#5b5f6d;
	text-decoration:none;
	white-space:nowrap;
}
.pt-hours-tab-link.active{
	background:#f46e07;
	border-color:#f46e07;
	color:#fff;
	font-weight:700;
}
.pt-legal-links a{ color:inherit; text-decoration:underline; }

/* ---------- Warenkorb als feste Seitenleiste am Desktop (wie bei
   Lieferando) - PT_DESKTOP_CART_BREAKPOINT = 1200px, siehe auch die
   passende JS-Ausnahme in custom.js (navbarTrigger-Klick-Handler). Auf
   Handy/Tablet bleibt alles unveraendert (Popup/Drawer). ---------- */
@media (min-width: 1200px){
	.body-section{ margin-right:440px; }
	/* WICHTIG: die Warenkorb-Seitenleiste ist "position:fixed" und liegt
	   damit IMMER ueber allem, was nicht extra eingerueckt wird - bisher
	   war nur der Hauptinhalt (.body-section) eingerueckt, nicht aber die
	   Kopfzeile. Dadurch lagen Sprachauswahl, Login/Konto und der
	   ☰-Kategorien-Button rechts oben genau unter der Warenkorb-Box und
	   waren dort nicht mehr klickbar/sichtbar. Jetzt bekommt die Kopfzeile
	   denselben Abstand wie der restliche Inhalt. */
	.pt-header{ margin-right:440px; }
	.sidebar-cart-active{
		width:440px;
		visibility:visible !important;
		opacity:1 !important;
		transform:translate(0,0) !important;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
		box-shadow:-4px 0 24px rgba(20,20,43,.06);
		padding-top:24px;
		/* WICHTIG: vorher gab es hier keinerlei Scroll-Moeglichkeit - bei
		   vielen Artikeln + Empfehlungen ist der Inhalt oben einfach ueber
		   den unteren Bildschirmrand hinausgelaufen und wurde abgeschnitten
		   (der "Zur Kasse"-Button war dann gar nicht mehr erreichbar). Jetzt
		   scrollt der Warenkorb bei Bedarf innerhalb seiner eigenen Box. */
		overflow-y:auto;
	}
	.sidebar-cart-active .cart-close{ display:none; }
	/* Etwas kompakter als vorher (weniger Innenabstand/Schrift), damit der
	   Lieferung/Abholung-Umschalter nicht so viel Platz im Kaestchen
	   einnimmt. */
	.pt-cart-service-option{ padding:8px 6px; }
	.pt-cart-service-label{ font-size:12.5px; }
	.pt-cart-service-status{ font-size:11px; }
	.main-wrapper.overlay-active .body-overlay{
		display:none !important;
		opacity:0 !important;
		visibility:hidden !important;
	}
	/* FIX (28.07.2026): Der dunkle Fussbereich (Copyright/Impressum-Links)
	   hoerte bisher genau am rechten Rand der Warenkorb-Box auf - das sah
	   aus wie ein abgeschnittener/fehlender Bereich. Jetzt laeuft der
	   dunkle Hintergrund bis zum Bildschirmrand durch (auch unter der
	   Warenkorb-Box), waehrend der eigentliche Text/die Links weiterhin
	   gut sichtbar links davon bleiben - genau wie ein normaler, randloser
	   Fussbereich mit einer "schwebenden" Seitenleiste obendrauf. */
	.body-section .pt-footer{ margin-right:-440px; }
	.body-section .pt-footer .container-fluid{ padding-right:456px; }
}

/* ==========================================================================
   Live-Bestellstatus auf der Bestaetigungsseite (thankyou.php)
   ========================================================================== */
.pt-live-order-status{
	display:flex;
	align-items:center;
	gap:10px;
	background:rgba(255,255,255,.15);
	border-radius:10px;
	padding:12px 14px;
	margin-bottom:16px;
	font-weight:600;
	color:#fff;
}
.pt-live-order-status .pt-live-status-icon{ font-size:18px; flex-shrink:0; }
.pt-live-status-confirmed .pt-live-status-icon{ color:#5ad18a; }

/* ==========================================================================
   Lieferung/Abholung-Umschalter oben im Warenkorb-Kaestchen (Desktop-
   Seitenleiste), nach Lieferando-Vorbild
   ========================================================================== */
.pt-cart-service-toggle{
	display:flex;
	gap:8px;
	margin:12px 0 18px;
}
.pt-cart-service-option{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	padding:10px 8px;
	border-radius:10px;
	border:1.5px solid #eee;
	background:#fafafa;
	color:#333;
	text-decoration:none;
	transition:border-color .15s ease, background .15s ease;
}
.pt-cart-service-option:hover{ color:#333; text-decoration:none; border-color:#f46e07; }
.pt-cart-service-option.active{ border-color:#f46e07; background:#fff6ec; }
.pt-cart-service-label{ font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:6px; }
.pt-cart-service-status{ font-size:11.5px; }
.pt-cart-service-status.open{ color:#1fa860; }
.pt-cart-service-status.closed{ color:#e0453f; }

/* ==========================================================================
   Warenkorb: Artikel-Extras (z.B. Schaerfegrad) und Notizen huebscher
   darstellen - vorher eine schlichte Liste ("1 x Sehr scharf"), jetzt
   kompakte, abgerundete Chips wie bei Lieferando & Co.
   ========================================================================== */
.cart-item-name{ font-weight:600; font-size:14px; margin-bottom:2px; }
.cart-item-note{
	color:#767a8c;
	font-size:12px;
	margin:2px 0 4px;
}
.pt-item-note-btn{
	background:none;
	border:none;
	color:#f46e07;
	font-size:12px;
	font-weight:600;
	padding:0;
	margin-bottom:6px;
	cursor:pointer;
}
.pt-cart-extras{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:4px 0 8px;
}
.pt-cart-extra-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:#f4f5f7;
	color:#3a3d46;
	font-size:12px;
	font-weight:500;
	padding:4px 8px;
	border-radius:999px;
}
.pt-cart-extra-chip .pt-removeexratoitem{
	cursor:pointer;
	color:#9a9da8;
	font-size:10px;
}
.pt-cart-extra-chip .pt-removeexratoitem:hover{ color:#e0453f; }

/* ==========================================================================
   Checkout: einzelne Abschnitte (Lieferart & Uhrzeit, Ausgewaehlte Artikel,
   Gastinformationen, Notiz, Trinkgeld) als klar abgegrenzte "Karten"
   darstellen - naeher am Look von Uber Eats/Lieferando & Co. Rein optisch,
   die Formular-Felder/Namen bleiben unveraendert, damit nichts an der
   eigentlichen Bestell-Funktion kaputtgeht.
   ========================================================================== */
.details-section .section{
	background:#fff;
	border:1px solid #eef0f3;
	border-radius:16px;
	padding:20px;
	margin-bottom:16px;
	box-shadow:0 2px 10px rgba(20,20,43,.04);
}
.checkout-title{
	margin-bottom:14px;
	display:flex;
	align-items:center;
	gap:10px;
}
.checkout-title h3{
	font-size:16px;
	font-weight:700;
	margin:0;
	color:#23253a;
}
/* Kleines Symbol vor jeder Ueberschrift, passend zum Thema - rein
   dekorativ per CSS eingefuegt, keine HTML-Aenderung noetig. */
.section-one .checkout-title h3:before{ content:"\f017"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#f46e07; margin-right:8px; font-size:14px; }
.section-two .checkout-title h3:before{ content:"\f290"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#f46e07; margin-right:8px; font-size:14px; }
.section-four .checkout-title h3:before{ content:"\f27a"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#f46e07; margin-right:8px; font-size:14px; }

/* ---------- Gastinformationen/Adresse (kompakt, wie bei Uber Eats/Lieferando) ---------- */
.pt-address-summary{
	display:flex;
	align-items:center;
	gap:10px;
	background:#fafbfc;
	border:1px solid #eef0f2;
	border-radius:12px;
	padding:14px 16px;
	cursor:pointer;
	margin-bottom:14px;
}
.pt-address-summary-icon{ color:#f46e07; font-size:18px; flex:0 0 auto; }
.pt-address-summary-text{ flex:1; font-size:14px; color:#3a3d46; display:flex; flex-direction:column; }
.pt-address-summary-text strong{ color:#26282f; }
.pt-address-summary-text small{ color:#767a8c; }
#pt-address-change-link{
	color:#f46e07;
	font-weight:700;
	font-size:13px;
	text-decoration:none;
	flex:0 0 auto;
}
#pt-address-change-link:hover{ text-decoration:underline; }
/* Nur wenn die Zusammenfassungs-Zeile ueberhaupt existiert (wiederkehrender
   Gast) wird das Formular standardmaessig versteckt und erst per Klick
   aufgeklappt - neue Gaeste (keine Zusammenfassung vorhanden) sehen die
   Felder ganz normal wie bisher direkt. */
#checkout-form.pt-address-collapsible{ display:none; }
#checkout-form.pt-address-collapsible.pt-open{ display:block; }

/* ==========================================================================
   Warenkorb-Schublade auf dem Handy/Tablet (unter 1200px): dieselbe
   fehlende Scroll-Moeglichkeit wie beim Desktop-Fix weiter oben - nur galt
   der bisher nur ab 1200px Breite. Bei vielen Artikeln lief der Inhalt auf
   dem Handy ueber den Bildschirmrand hinaus und der "Zur Kasse"-Button war
   nicht erreichbar. Jetzt auch hier behoben.
   ========================================================================== */
@media (max-width: 1199.98px){
	.sidebar-cart-active{
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		max-height:100vh;
	}
}

/* ==========================================================================
   Warenkorb-Seitenleiste (Desktop): abgerundete Ecke oben links (dort wo
   sie an den Seiteninhalt "andockt") statt eckig - wirkt weniger wie
   "abgeschnitten". Und der "Zur Kasse"-Button bleibt jetzt IMMER sichtbar
   am unteren Rand (position:sticky), man muss also nicht mehr durch die
   ganze lange Liste (Artikel + Empfehlungen + Notizfeld) scrollen, um ihn
   zu finden.
   ========================================================================== */
@media (min-width: 1200px){
	.sidebar-cart-active{
		border-top-left-radius:20px;
	}
	.checkout-section{
		position:sticky;
		bottom:0;
		background:#fff;
		padding-top:10px;
		padding-bottom:10px;
		box-shadow:0 -4px 12px rgba(20,20,43,.06);
	}
}

/* ---------- Sichtbarer Zurueck-Button im Bestell-Bestaetigungs-Popup ---------- */
.pt-order-confirm-close{
	position:absolute;
	top:14px;
	left:14px;
	width:34px;
	height:34px;
	border-radius:50%;
	border:none;
	background:#f4f5f7;
	color:#3a3d46;
	font-size:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:2;
}
.pt-order-confirm-close:hover{ background:#eaebee; }

/* ---------- "Zur Kasse"-Button auch auf dem Handy immer sichtbar
   (bisher nur am Desktop gemacht) - bei mehreren Artikeln musste man sonst
   ganz nach unten scrollen, um ihn zu finden. ---------- */
.checkout-section{
	position:sticky;
	bottom:0;
	background:#fff;
	padding-top:10px;
	padding-bottom:10px;
	box-shadow:0 -4px 12px rgba(20,20,43,.06);
	z-index:5;
}

/* ==========================================================================
   Footer (Desktop) komplett neu gestaltet: warmes dunkles Anthrazit statt
   reinem Schwarz, weniger Innenabstand (nimmt weniger Platz), dezenter
   oranger Akzentstrich oben, aufgeraeumtere Spalten. Rein optisch, keine
   Funktionsaenderung.
   ========================================================================== */
.pt-footer{
	background:#2b2622;
	padding:34px 30px 24px;
	border-top:3px solid #f46e07;
}
.pt-footer .pt-logo a{
	color:#fff;
	font-size:20px;
	font-weight:800;
	text-decoration:none;
	display:flex;
	align-items:center;
	gap:8px;
}
.pt-footer .pt-logo i{ color:#f46e07; }
.pt-footer .pt-social{ margin-top:14px; display:flex; gap:10px; }
.pt-footer .pt-social a{
	width:32px; height:32px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	color:#e8e4df;
	font-size:13px;
	transition:background .15s ease;
}
.pt-footer .pt-social a:hover{ background:#f46e07; color:#fff; }
.pt-footer .pt-links h3{
	color:#f4b98a;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:.4px;
	font-weight:700;
	margin-bottom:12px;
}
.pt-footer .pt-links a{
	color:#c9c4bd;
	font-size:13.5px;
	display:block;
	margin-bottom:8px;
	text-decoration:none;
}
.pt-footer .pt-links a:hover{ color:#fff; }
.pt-footer .pt-links a i{ color:#f46e07; margin-right:6px; font-size:11px; }
.pt-footer .pt-copy{
	color:#9c968e;
	font-size:12.5px;
	border-top:1px solid rgba(255,255,255,.08);
	padding-top:16px;
	margin-top:18px;
}
.pt-footer .pt-legal-links a{ color:#c9c4bd; }
.pt-footer .pt-legal-links a:hover{ color:#f46e07; }

/* ---------- Oeffnungszeiten-Bereich: als saubere Karte mit Schatten statt
   flachem Hintergrund, etwas mehr Innenabstand fuer Luft. ---------- */
.info-footer{
	background:#fff !important;
	border:1px solid #eef0f2;
	box-shadow:0 4px 20px rgba(20,20,43,.05);
	padding:32px 24px !important;
	/* FIX (28.07.2026): hatte vorher 80px Seitenabstand eingebaut (siehe
	   style.css) und wirkte dadurch deutlich schmaler als der Impressum-/
	   AGB-Text darueber, obwohl beide auf derselben Seite direkt
	   untereinander stehen - jetzt dieselbe Breite/Ausrichtung wie der
	   ".container" mit dem Seiten-Text. */
	margin:0 auto 80px !important;
	width:calc(100% - 30px);
	max-width:1140px;
}
.footer-info h3{
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:.4px;
	color:#26282f;
	margin-bottom:14px;
}

/* ==========================================================================
   FIX (24.07.2026): Warenkorb-Fenster auf dem Handy jetzt komplett
   bildschirmfuellend, wie gewuenscht (vorher bewusst 92% mit Rand zur
   Seite dahinter - das sollte aber nicht sein).
   ========================================================================== */
@media (max-width: 1199.98px){
	.sidebar-cart-active{
		width:100% !important;
		max-width:100%;
		left:0 !important;
	}
}

/* ==========================================================================
   Der jetzt immer sichtbare "Zur Kasse"-Balken hat den Bereich darueber
   (Empfehlungen-Karussell, Notizfeld) teilweise verdeckt, wenn man ganz
   nach unten gescrollt hat. Genug Abstand am Ende der Liste schaffen,
   damit nichts mehr dahinter verschwindet.
   ========================================================================== */
.recommendations-section,
.comment-box-section{
	padding-bottom:8px;
}
.checkout-section{
	margin-top:8px;
}
.sidebar-cart-active #cart_details{
	padding-bottom:12px;
}

/* ---------- Verzoegerungs-Hinweis (nur sichtbar, wenn im Admin-Bereich
   aktiviert) - dezentes, aber gut sichtbares Banner oben auf jeder Seite. ---------- */
.pt-delay-notice{
	background:#fff4e5;
	color:#8a5300;
	font-size:13px;
	font-weight:600;
	text-align:center;
	padding:9px 16px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
}
.pt-delay-notice i{ color:#f46e07; }

/* Artikelnummer ("Nr. 101") vor dem Artikelnamen - auf der Speisekarte und
   im Bestell-Popup. Hilft Stammkunden, die telefonisch mit der Nummer statt
   dem vollen Namen bestellen ("einmal die 101 bitte") - deshalb bewusst
   auffaellig genug, um schnell erkannt zu werden, aber klein genug, um den
   Artikelnamen nicht zu verdraengen. */
.pt-menu-code-badge{
	display:inline-block;
	background:#fff6ec;
	color:#f46e07;
	font-weight:700;
	font-size:0.78em;
	border:1px solid #f9d9b8;
	border-radius:6px;
	padding:1px 7px;
	margin-right:7px;
	vertical-align:middle;
	white-space:nowrap;
}

/* ---------- Pflichtfeld-Markierung im Checkout (19.07.2026) ---------- */
/* Zeigt eine rote Umrandung + kleinen roten Punkt direkt am Feld, wenn es
   beim Absenden fehlt - vorher gab es nur eine Textmeldung oben, man musste
   selbst raten, welches Feld genau gemeint war. Verschwindet automatisch,
   sobald man anfaengt, das Feld auszufuellen (siehe custom.js). */
.pt-field-missing{
	border:2px solid #e74c3c !important;
	background:#fff6f6 !important;
	box-shadow:0 0 0 3px rgba(231,76,60,0.12);
	position:relative;
}

/* FIX: Die Google-Adressvorschlagsliste (.pac-container) rendert
   normalerweise mit einem niedrigen z-index. Bootstrap-Popups haben
   z-index:1050 - dadurch landete die Vorschlagsliste bisher UNSICHTBAR
   hinter dem Popup, obwohl sie technisch da war (kein Darstellungsfehler,
   nur falsche Stapelreihenfolge). */
.pac-container{ z-index:999999 !important; }

/* FIX (24.07.2026): "position:sticky" hat sich als unzuverlaessig
   herausgestellt (computed style zeigte korrekt "sticky", aber das
   tatsaechliche Kleben hat launisch mal funktioniert, mal nicht - siehe
   ausfuehrliche Fehlersuche im Chat). Jetzt genau derselbe bereits
   bewaehrte Mechanismus wie bei der Kopfzeile (".fixed-header", die immer
   zuverlaessig funktioniert): "position:fixed" wird per JavaScript-Klasse
   gesteuert (siehe scripts.php, ".pt-topbar-pinned"), nicht mehr per CSS
   allein. Der Platzhalter ".pt-sticky-topbar-spacer" davor verhindert,
   dass der Seiteninhalt springt, wenn die Leiste "position:fixed" wird
   (dabei verlaesst sie normalerweise den normalen Fluss - der Platzhalter
   nimmt genau so viel Platz ein, wie die Leiste braucht). */
.pt-sticky-topbar{
	background:#fff;
}
.pt-sticky-topbar.pt-topbar-pinned{
	position:fixed;
	top:68px;
	left:0;
	right:0;
	z-index:900;
	box-shadow:0 4px 12px rgba(20,20,43,.06);
}
@media (max-width: 767.98px){
	.pt-sticky-topbar.pt-topbar-pinned{ top:58px; }
}
@media (min-width: 1200px){
	.pt-sticky-topbar.pt-topbar-pinned{ right:440px; }
}
.pt-sticky-topbar-spacer{ display:none; }
.pt-sticky-topbar .search-section{
	padding:8px 0;
}
@media (max-width: 991.98px){
	.pt-sticky-topbar .search-section{ padding:8px 12px; }
}
.pt-sticky-topbar .pt-cat-bar-wrapper{
	box-shadow:0 2px 6px rgba(20,20,43,.05);
	/* FIX (24.07.2026): Das Menue-Symbol sitzt jetzt normal in der Zeile
	   (siehe .pt-cat-menu-btn), keine Platz-Reservierung mehr noetig. */
	padding-right:8px;
}

/* FIX (22.07.2026): Beim schnellen Mehrfachklicken auf die Plus-/Minus-
   Mengen-Knöpfe (Warenkorb, Artikel-Auswahl) hat der Browser das
   ohne diese Regel wie ein Doppelklick behandelt und den daneben-
   stehenden Text blau markiert (wie beim Text-Kopieren) - kein echter
   Fehler in der Bestellung selbst, aber ein verwirrendes optisches
   Problem, das nur beim schnellen Klicken auftritt (langsames Klicken
   zeigt es nicht, genau wie beschrieben). "user-select: none" verhindert,
   dass Klicks auf diese Knoepfe ueberhaupt als Text-Markierung gewertet
   werden koennen.*/
button,
.qty-selector, .cart-plus, .cart-minus, .quantity-selector,
.pt-custom-cart, .pt-custom-cart *,
[class*="qty"], [class*="quantity"]{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* FIX (24.07.2026): Kurzbeschreibung unter Logo/Ort auf der Startseite
   (siehe Einstellungen -> Design -> Kurzbeschreibung), optional. */
.pt-tagline{
	display:block;
	font-size:12.5px;
	color:rgba(255,255,255,.85);
	margin-top:2px;
	max-width:220px;
	line-height:1.35;
}
@media (max-width: 575.98px){
	.pt-tagline{ font-size:11.5px; max-width:170px; }
}

/* ==========================================================================
   FIX (24.07.2026): Liefern/Abholen prominent direkt ueber der Suche
   (statt versteckt im Warenkorb-Kaestchen) - genau wie bei Wolt/Uber Eats.
   Nutzt denselben Umschalt-Mechanismus wie das bestehende Kaestchen
   (.pt-cart-service-trigger), oeffnet also automatisch das bekannte
   "Bestelldetails aendern"-Popup mit der richtigen Vorauswahl - keine neue
   JS-Logik noetig.
   ========================================================================== */
.pt-service-toggle{
	display:flex;
	gap:8px;
	padding:10px 12px 6px;
}
@media (min-width: 768px){
	.pt-service-toggle{ padding-left:0; padding-right:0; }
}
.pt-service-toggle-btn{
	flex:1;
	text-align:center;
	padding:6px 14px;
	border-radius:10px;
	background:#f3f4f6;
	color:#5b5f6d;
	font-weight:700;
	font-size:14px;
	border:1px solid transparent;
	transition:all .15s ease;
}
.pt-service-toggle-label{ display:flex; align-items:center; justify-content:center; gap:6px; }
.pt-service-toggle-status{ display:block; text-align:center; font-size:11.5px; font-weight:500; margin-top:2px; }
.pt-service-toggle-status.open{ color:#1fa860; }
.pt-service-toggle-status.closed{ color:#e0453f; }
.pt-service-toggle-btn.active .pt-service-toggle-status.open{ color:#178a4d; }
.pt-service-toggle-btn.active{
	background:#fdeee0;
	color:#f46e07;
	border-color:#f4c896;
}
.pt-service-toggle-btn:hover{ text-decoration:none; color:#f46e07; }
@media (min-width: 768px){
	.pt-service-toggle{ max-width:420px; margin:0 auto; }
}
/* FIX (24.07.2026): Jetzt, wo beide Stellen (dieser Umschalter hier oben
   und die Warenkorb-Seitenleiste rechts) exakt bei derselben Breite
   (1200px) wechseln, kann dieser hier ab 1200px wieder ausgeblendet
   werden, OHNE dass beim Verkleinern/Vergroessern ein Sprung/Luecke
   entsteht - vorher gab's dafuer einen Tippfehler (1299.98px statt
   1200px an einer Stelle), der jetzt behoben ist. Damit steht der
   Umschalter am vollen Desktop nicht mehr doppelt da (oben UND im
   Warenkorb-Kaestchen), bleibt aber beim Verkleinern durchgehend
   sichtbar. */
@media (min-width: 1200px){
	.pt-service-toggle{ display:none; }
}

/* ==========================================================================
   FIX (24.07.2026): Warenkorb-Leiste am Desktop etwas kompakter (kleinere
   Schrift, weniger Innenabstand) - naeher an der aufgeraeumten, dichteren
   Optik von Lieferando. Nur innerhalb der Seitenleiste selbst (wirkt sich
   NICHT auf die Handy-Warenkorb-Schublade aus, die bleibt wie sie war).
   ========================================================================== */
@media (min-width: 1200px){
	.sidebar-cart-active .cart-item-name{ font-size:13px; }
	.sidebar-cart-active .cart-item-note,
	.sidebar-cart-active small{ font-size:11.5px; }
	.sidebar-cart-active .pt-extra span{ font-size:9.5px; padding:0 6px; padding-right:10px; line-height:19px; }
	.sidebar-cart-active .pt-extra strong,
	.sidebar-cart-active .pt-extra small{ font-size:11px; }
	.sidebar-cart-active .cart-item{ padding-top:10px; padding-bottom:10px; }
	.sidebar-cart-active h3{ font-size:16px; }
}

/* FIX (24.07.2026): Die fest positionierte Kopfzeile (.fixed-header, wird
   beim Scrollen per JS aktiviert - siehe scripts.php) hat "width:100%",
   was bei "position:fixed" IMMER die volle Bildschirmbreite meint, egal
   was der Elternteil (.pt-header mit seinem margin-right:440px) an Platz
   fuer die Warenkorb-Seitenleiste reserviert. Dadurch liefen "Fuer spaeter
   bestellen"/"Anmelden" usw. unter die Warenkorb-Seitenleiste. Jetzt macht
   die Kopfzeile ab 1200px genauso viel Platz wie die Seitenleiste breit
   ist. */
@media (min-width: 1200px){
	.fixed-header{ width:calc(100% - 440px) !important; }
}

/* ==========================================================================
   FIX (24.07.2026): "Gerade geschlossen"-Popup - erscheint automatisch,
   wenn ein Kunde bestellen will, waehrend der gewaehlte Service (Lieferung/
   Abholung) gerade geschlossen ist. Zentriertes Overlay, angelehnt an
   Lieferando/Wolt/Uber Eats.
   ========================================================================== */
.pt-closed-popup-overlay{
	position:fixed; inset:0; background:rgba(20,20,43,.4);
	z-index:1500; display:none;
}
.pt-closed-popup{
	position:fixed; top:50%; left:50%;
	transform:translate(-50%,-50%);
	width:90%; max-width:380px;
	background:#fff;
	border-radius:18px;
	box-shadow:0 20px 50px rgba(20,20,43,.25);
	z-index:1501;
	padding:24px 22px 22px;
	display:none;
}
.pt-closed-popup-overlay.pt-open, .pt-closed-popup.pt-open{ display:block; }
.pt-closed-popup h4{
	font-size:19px;
	font-weight:800;
	margin:6px 0 20px;
	padding-right:24px;
	line-height:1.35;
}
.pt-closed-popup h4 span{ font-weight:600; color:#5b5f6d; display:block; font-size:16px; margin-top:2px; }
.pt-closed-popup-close{
	position:absolute;
	top:14px; right:14px;
	width:30px; height:30px;
	border-radius:50%;
	border:1px solid #e4e4e4;
	background:#fff;
	font-size:18px;
	line-height:1;
	color:#333;
	cursor:pointer;
}
.pt-closed-popup-preorder-btn{
	margin-bottom:14px;
}
.pt-closed-popup-dismiss{
	display:block;
	width:100%;
	text-align:center;
	border:none;
	background:none;
	color:#5b5f6d;
	font-weight:700;
	font-size:14px;
	padding:8px;
	cursor:pointer;
	text-decoration:underline;
}

/* ==========================================================================
   FIX (24.07.2026): Warenkorb-Artikelzeile - der Preis stand bisher mitten
   im Textbereich (nach Notiz/Extras), dadurch sprang er je nach Artikel an
   eine andere Stelle. Jetzt in einer eigenen, festen Spalte rechts, immer
   an derselben Position - unabhaengig davon, wie viel Text/wie viele
   Extras der jeweilige Artikel hat.
   ========================================================================== */
.pt-cart-item-price{
	display:block;
	font-weight:700;
	font-size:14px;
	color:#202125;
	margin-bottom:6px;
	white-space:nowrap;
}
/* "+ Notiz hinzufuegen" nahm bisher viel Platz als Text ein - jetzt ein
   kompaktes Stift-Symbol (mit kurzem Wort dahinter, damit der Zweck klar
   bleibt), spart deutlich Platz in der Zeile. */
.pt-item-note-btn-add{
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-size:11.5px !important;
}
.pt-item-note-btn i{ font-size:10px; }
.cart-item-note .pt-item-note-btn{
	background:#f4f5f7;
	width:22px; height:22px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-left:2px;
	vertical-align:middle;
}

/* FIX (24.07.2026): Der "Abholung"-Umschalter im Warenkorb-Kaestchen hatte
   auf dem Handy keinen Randabstand zum rechten Bildschirmrand. */
@media (max-width: 1199.98px){
	.pt-cart-service-toggle{ margin-left:4px; margin-right:4px; }
}

/* ==========================================================================
   FIX (24.07.2026): Empfehlungs-Karten im Warenkorb waren recht gross
   (10rem hohes Bild + eigener 6rem hoher Textbereich) - im schmalen
   Warenkorb-Kaestchen wirkte das ueberdimensioniert. Etwas kompakter.
   ========================================================================== */
.recommendations .item-right-inner{ height:6rem; }
.recommendations .item .item-left-part{ padding:10px 12px; height:auto; min-height:4.2rem; }
.recommendations .item-left-inner h3{ font-size:13px; line-height:1.3; }
.recommendations .item-price p{ font-size:12.5px; }

/* ==========================================================================
   Kleinerer Titel-Banner auf Textseiten (Impressum, Datenschutz, AGB,
   Speisekarten-Kategorien) - war vorher genauso hoch wie auf der Startseite
   und wirkte auf diesen eher schlichten Seiten zu wuchtig/gross. Jetzt eine
   kompakte, abgerundete Karte statt eines randlosen, breiten Balkens.
   ========================================================================== */
.pt-breadcrumb-p{
	height:auto;
	min-height:auto;
	padding:14px 20px;
	width:calc(100% - 30px);
	max-width:1140px;
	margin:24px auto 28px;
	border-radius:16px;
	line-height:1.3;
	box-shadow:0 6px 20px rgba(244,110,7,.18);
}
.pt-breadcrumb-p:before{ display:none; }
.pt-breadcrumb-p h3{ font-size:19px; }

/* ==========================================================================
   Gespeicherte-Adressen-Schnellauswahl im Liefer-Popup (siehe footer.php).
   ========================================================================== */
.pt-saved-address-list{ display:flex; flex-direction:column; gap:8px; }
.pt-saved-address-item{
	display:flex; align-items:center; gap:10px;
	border:1.5px solid #eef0f2; border-radius:10px;
	padding:10px 12px; cursor:pointer; font-size:13.5px; color:#26282f;
	transition:all .15s ease;
}
.pt-saved-address-item i{ color:#f46e07; font-size:13px; flex-shrink:0; }
.pt-saved-address-item:hover{ border-color:#f46e07; background:#fdeee0; }
.pt-saved-address-item.pt-saved-address-active{ border-color:#f46e07; background:#fdeee0; font-weight:600; }