/**
 * Datei: sidebar.css
 * Modul: Search – Sidebar (Desktop + Mobile Offcanvas)
 *
 * Zweck:
 * - Desktop-Sidebar im Suchlayout
 * - Mobile Offcanvas-Sidebar mit Overlay (JS steuert open/visible)
 *
 * Regeln:
 * - Keine Button-Designs, nur Struktur/Layout
 * - Keine festen Farben: Tokens nutzen
 * - Spaltenbreite kommt aus layout.css
 * - Barrierefreiheit: Overlay nutzt Token, Sidebar bleibt scrollbar
 */

/* ============================================================
   1) DESKTOP SIDEBAR
   Sichtbar ab >900px
============================================================ */
.mp-sidebar-desktop{
	display:block;
	margin:0;
	padding:0;
}

@media (max-width:900px){
	.mp-sidebar-desktop{
		display:none !important;
	}
}

/* ============================================================
   2) MOBILE OFFCANVAS SIDEBAR
============================================================ */

/* Grundzustand: Desktop unsichtbar
   Hinweis: layout.css nutzt .mp-search-sidebar als Desktop-Spalte.
   In Mobile (<900px) wird sie Offcanvas. */
.mp-search-sidebar{
	display:none;
	background:var(--bg-main);
}

@media (max-width:900px){

	.mp-search-sidebar{
		display:block;
		position:fixed;
		top:0;
		left:0;
		height:100vh;
		width:82%;
		max-width:360px;

		background:var(--bg-main);
		z-index:10000;
		padding:20px;

		/* Offcanvas Animation */
		transform:translateX(-100%);
		transition:transform .28s cubic-bezier(0.25, 0.1, 0.25, 1);

		overflow:auto;
		-webkit-overflow-scrolling:touch;

		/* weicher Abschluss ohne harte Border */
		box-shadow:var(--shadow-md);
	}

	.mp-search-sidebar.open{
		transform:translateX(0);
	}

	/* Close Button (Layout only)
	   Button-Design kommt aus Theme, hier nur Abmessungen */
	.mp-sidebar-close{
		display:block;
		width:100%;
		padding:10px 14px;
		margin-bottom:15px;

		border-radius:var(--btn-radius);
		text-align:left;
		font-size:16px;
	}
}

/* ============================================================
   3) OVERLAY (nur Mobile)
============================================================ */
.mp-sidebar-overlay{
	display:none;
}

@media (max-width:900px){

	.mp-sidebar-overlay{
		display:block;
		position:fixed;
		inset:0;
		height:100vh;

		/* Token statt Hardcode */
		background:var(--overlay-bg);
		z-index:9990;

		opacity:0;
		pointer-events:none;
		transition:opacity .28s ease;
	}

	.mp-sidebar-overlay.visible{
		opacity:1;
		pointer-events:auto;
	}
}