:root{
	--sidebar-width:280px;
	--header-height:56px;
	--mobile-header-height:47px;
	--muted-border:rgba(27,31,35,0.12);
	--bg: #f7f8fa;
	--card-bg: #ffffff;
	--accent: #9c9ab8;
	--brand-bg: rgba(243,244,246,0.95);
}

html,body{
	height:100%;
	margin:0;
	background:var(--bg);
	color:#0f172a;
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	overflow: hidden;
}

/* global positions sidebar, topbar, main */
.app-grid{
	display:grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	grid-template-rows: var(--header-height) 1fr; /* topbar, main, footbar */
	height:100vh; /* volle Höhe für unabhängiges Scrollen */
}

.main{
	grid-column:2/3;
	grid-row:2/3;
	overflow-y:auto; /* unabhängiges Scrollen */
	height:100%; /* volle Höhe im Grid */
	padding:1rem 1.25rem;
	background: linear-gradient(180deg, #fff, #fbfbfd 60%);
}

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

.sidebar {
	position: fixed;
	top: var(--header-height);
	left: 0;
	bottom: 0;
	width: var(--sidebar-width);
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #fff, #fbfbfd 60%);
	box-shadow: 4px 0 8px rgba(0,0,0,0.12);
	z-index: 1030;
	height: calc(100vh - var(--header-height)); /* Dynamisch */
}

.sidebar .nav-wrap {
	flex: 1;
	overflow-y: auto;
	min-height: 0; /* wichtig für flexbox */
}

.modal {
	transform: none !important;
}

.menu-list {
	padding:0 0;
}

.nav-link{
	display:flex;
	align-items:center;
	gap:.75rem;
	padding:.6rem .85rem;
	width: 100%;
	border-radius: 0;
}

.nav-link:hover {
	background: rgba(79,70,229,0.08);
	color: #4f46e5;
}
.nav-item {
	width:100%;
}

.nav-item.active {
	background: rgba(79,70,229,0.08);
	color: #4f46e5;
}

.submenu .nav-link{ padding-left:2.1rem; font-size:.95rem; }

.menu-toggle{
	margin-left:auto;
	transition: transform .22s ease;
	display:inline-block;
	transform-origin:center;
}
.menu-toggle.rotate{ transform:rotate(180deg); }

.topbar {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	position: relative;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
	border-bottom: none;
	background: rgba(243,244,246);
	height: var(--header-height);
	display: none;
	align-items: center;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--muted-border);
	z-index: 1040;
	justify-content: space-between;
}

.topbar::after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background: var(--accent);
}


/* --- Mobile Layout --- */
@media (max-width: 991.98px) {

	/* Grid auf mobile umstellen */
	.app-grid {
		position: relative;
		grid-template-columns: 1fr;
		grid-template-rows: var(--mobile-header-height) 1fr; /* Footer wird fixed, daher keine extra Zeile nötig */
		overflow-x: hidden;
	}

	.mobile-nav {
		height: var(--mobile-header-height);
		border-bottom: 1px solid var(--muted-border);
		background: rgba(243,244,246);
		display: flex; /* wichtig: nicht none */
		align-items: center;
		justify-content: space-between;
		padding: 0 1.6rem;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		transform: translateX(110%);
		opacity: 0;
		visibility: hidden;
		transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .2s ease, visibility .2s ease;
		z-index: 1100;
	}

	.mobile-nav.open {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}

	body[data-topbar-position="footer"] .mobile-nav {
		top: auto;
		bottom: 0;
		border-top: 1px solid var(--muted-border);
		border-bottom: none;
	}

	/* Mittig Button-Gruppe */
	.mobile-nav .button-group-centered {
		display: flex;
		align-items: center;
		justify-content: space-between; /* links/rechts verteilen */
		width: 100%; /* volle Breite */
	}

	/* Einheitliches Button-Styling */
	.mobile-nav button {
		display: flex;
		align-items: center;
		justify-content: center;
	}



	/* Topbar mobil */
	.topbar {
		display: none; /* JS blendet sie ein/aus */
		justify-content: space-between;
		align-items: center;
		padding: 0 1rem;
		height: var(--mobile-header-height);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1050;
		background: rgba(243,244,246);
		box-shadow: 0 4px 8px rgba(0,0,0,0.12);
	}

	/* Footbar mobil */
	.footbar {
		display: none; /* JS blendet sie ein/aus */
		justify-content: space-between;
		align-items: center;
		padding: 0 1rem;
		height: var(--mobile-header-height);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1050;
		background: rgba(243,244,246);
		box-shadow: 0 -4px 8px rgba(0,0,0,0.12);
	}

	.footbar::after {
		content:"";
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:1px;
		background: var(--accent);
	}

	/* Sidebar */
	.sidebar {
		position: absolute;
		top: var(--mobile-header-height);
		bottom: var(--mobile-header-height);
		right: 0;
		width: 100%;
		max-width: 100%;
		overflow-y: auto;
		box-shadow: 8px 0 30px rgba(15,23,42,0.08);
		transform: translateX(110%);
		transition: transform .28s cubic-bezier(.2,.9,.3,1);
		z-index: 1060;
	}

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

	/* Main Content */
	.main {
		position: relative;
		grid-row: 2 / 3;
		grid-column: 1 / 2;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		top: 0;       /* Platz für Topbar */
		bottom: 0;    /* Platz für Footbar */
		height: auto;                    /* wird durch JS berechnet */
	}

	/* Hamburger Button */
	.btn-hamburger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}


}