/* Cannafree: Touch-Menü (01.11.2026) – nur auf Geräten ohne Maus (html.cf-tm-touch) */

/* PC-Aufklappflächen und Theme-Schublade auf Touch-Geräten aus: dort öffnet die Schublade unten */
html.cf-tm-touch header.ts-header .vertical-menu-wrapper nav.vertical-menu,
html.cf-tm-touch header.ts-header nav.main-menu > ul.menu > li > ul.sub-menu,
html.cf-tm-touch #group-icon-header { display: none !important; }

html.cf-tm-offen, html.cf-tm-offen body { overflow: hidden !important; }

.cf-tm { position: fixed; inset: 0; z-index: 100000; }
.cf-tm[hidden] { display: none; }
.cf-tm-schleier { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity 240ms ease-out; -webkit-tap-highlight-color: transparent; }
.cf-tm-tafel {
	position: absolute; top: 0; bottom: 0; left: 0;
	width: min(420px, calc(100vw - 48px));
	display: flex; flex-direction: column; overflow: hidden;
	background: #12170f; color: rgba(255,255,255,.95);
	border-right: 1px solid rgba(127,184,87,.3);
	box-shadow: 8px 0 32px rgba(0,0,0,.45);
	transform: translateX(-100%); transition: transform 260ms cubic-bezier(.32,.72,0,1);
	padding-bottom: env(safe-area-inset-bottom);
}
.cf-tm.cf-tm-sichtbar .cf-tm-schleier { opacity: 1; }
.cf-tm.cf-tm-sichtbar .cf-tm-tafel { transform: none; }

.cf-tm-kopf { flex: none; display: flex; align-items: center; height: 56px; border-bottom: 1px solid rgba(127,184,87,.3); padding-top: env(safe-area-inset-top); }
.cf-tm-titel { flex: 1; min-width: 0; padding: 0 4px 0 20px; font-weight: 800; font-size: 17px; color: #9ad072; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-tm-tief .cf-tm-titel { padding-left: 0; }
.cf-tm-zurueck, .cf-tm-zu, .cf-tm-auf { box-shadow: none; border-radius: 0; min-height: 0; }
.cf-tm-zurueck, .cf-tm-zu { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: rgba(255,255,255,.95); padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cf-tm-zurueck { display: none; }
.cf-tm-tief .cf-tm-zurueck { display: flex; }
.cf-tm-zurueck:active, .cf-tm-zu:active { color: #9ad072; background: rgba(127,184,87,.14); }

/* zwei Ebenen nebeneinander, Wechsel per Verschieben */
.cf-tm-spur { flex: 1; min-height: 0; display: flex; width: 200%; transform: translateX(0); transition: transform 240ms cubic-bezier(.32,.72,0,1); }
.cf-tm-tief .cf-tm-spur { transform: translateX(-50%); }
.cf-tm-ebene { width: 50%; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.cf-tm-ebene[aria-hidden="true"] { visibility: hidden; transition: visibility 0s 240ms; }

.cf-tm-liste { list-style: none; margin: 0; padding: 0; }
.cf-tm-punkt { display: flex; align-items: stretch; min-height: 54px; border-bottom: 1px solid rgba(127,184,87,.18); margin: 0; padding: 0; }
.cf-tm-link {
	flex: 1; min-width: 0; display: flex; align-items: center; padding: 14px 20px;
	font: inherit; font-weight: 700; font-size: 16px; line-height: 1.35; text-align: left;
	color: rgba(255,255,255,.95) !important; text-decoration: none !important;
	background: transparent; border: 0; cursor: pointer;
	overflow-wrap: normal; word-break: normal; hyphens: manual;
	text-transform: none; letter-spacing: normal; border-radius: 0; box-shadow: none; min-height: 0; width: auto; height: auto;
	-webkit-tap-highlight-color: transparent;
}
.cf-tm-auf { flex: none; width: 60px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-left: 1px solid rgba(127,184,87,.12); color: rgba(255,255,255,.75); padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cf-tm-link:active, .cf-tm-auf:active { background: rgba(127,184,87,.14); color: #9ad072 !important; }
.cf-tm-unter .cf-tm-link { font-weight: 600; font-size: clamp(14px, 4.1vw, 16px); }
.cf-tm-alle .cf-tm-link { color: #9ad072 !important; font-weight: 800; }
.cf-tm-extra:first-of-type, .cf-tm-punkt:not(.cf-tm-extra) + .cf-tm-extra { border-top: 6px solid rgba(127,184,87,.12); }

/* Kategoriebilder (01.11.2026): Unterpunkte mit Bild der Megamenü-Kachel */
.cf-tm-unter .cf-tm-link.cf-tm-mit-bild { gap: 14px; padding-top: 8px; padding-bottom: 8px; }
.cf-tm-unter-bild { flex: none; width: 72px; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: #12170f; border: 1px solid rgba(127,184,87,.3); }
.cf-tm-unter-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.3); transform-origin: 50% 78%; }

/* Beliebt */
.cf-tm-beliebt { padding: 0 0 24px; }
.cf-tm-abschnitt { padding: 22px 20px 10px; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #9ad072; }
.cf-tm-karten { display: flex; flex-direction: column; }
.cf-tm-karte { display: flex; align-items: center; gap: 14px; padding: 8px 20px; color: rgba(255,255,255,.95) !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; }
.cf-tm-karte:active { background: rgba(127,184,87,.14); }
.cf-tm-karte-bild { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); }
.cf-tm-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-tm-karte-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cf-tm-karte-name { font-size: 14px; line-height: 1.3; font-weight: 600; }
.cf-tm-karte-preis { display: flex; align-items: baseline; gap: 5px; font-size: 15px; font-weight: 800; color: #9ad072; white-space: nowrap; }
.cf-tm-karte-preis > :not(:last-child) { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
	.cf-tm-schleier, .cf-tm-tafel, .cf-tm-spur { transition: none; }
}