.topbar{

height:60px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 24px;

background:var(--bg-panel);

border-bottom:1px solid var(--border);
}

.logo{
font-weight:600;
font-size:16px;
}

.top-actions{
display:flex;
gap:12px;
}

.top-actions button{

padding:8px 12px;

border-radius:6px;

border:1px solid var(--border);

background:var(--bg-card);
color:var(--text-main);

cursor:pointer;
}

.layout{
display:flex;
height:calc(100vh - 60px);
}

.sidebar{

width:220px;

background:var(--bg-panel);

border-right:1px solid var(--border);

padding:20px;

display:flex;
flex-direction:column;
gap:10px;
}

/* NAV ITEMS */

.nav-item{

padding:10px 12px;

border-radius:6px;

cursor:pointer;

font-size:14px;

display:block;
text-decoration:none;
color:var(--text-main);
}

.sidebar a,
.sidebar a:link,
.sidebar a:visited{

text-decoration:none;
color:var(--text-main);
display:block;
}

.nav-item:hover,
.sidebar a:hover{

background:var(--bg-card);
}

.sidebar a.active,
.nav-item.active{

background:var(--accent);
color:white;
}

.content{
flex:1;
padding:24px;
overflow:auto;
}

/* GRID */

.grid{

display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:24px;
}

/* CARD */

.card{

background:var(--bg-card);

padding:20px;

border-radius:10px;

border:1px solid var(--border);

display:flex;
flex-direction:column;
gap:16px;
}

.card h2{
margin:0;
font-size:18px;
}

/* BUTTON */

button{

padding:8px 12px;

border-radius:6px;

border:none;

background:var(--accent);
color:white;

cursor:pointer;
font-size:13px;
}

button:hover{
opacity:0.9;
}

/* SPLIT LAYOUT */

.split{
display:grid;
grid-template-columns: 1fr 1fr;
gap:20px;
}

/* LIST */

.list{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:8px;
}

.list li{
padding:10px;
border-radius:6px;
cursor:pointer;
background:var(--bg-panel);
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
}

.list li:hover{
background:var(--accent);
color:white;
}

/* FORM */

.form{
display:flex;
flex-direction:column;
gap:14px;
max-width:420px;   /* 🔥 verhindert full-width chaos */
}

/* FORM GROUP */

.form-group{
display:flex;
flex-direction:column;
gap:6px;
}

.form-group label{
font-size:12px;
opacity:0.7;
}

/* INPUT + SELECT */

.form input,
.form select{

padding:8px 10px;

border-radius:6px;

border:1px solid var(--border);

background:var(--bg-panel);
color:var(--text-main);

font-size:13px;
}

/* INPUT FOCUS */

.form input:focus,
.form select:focus{
outline:none;
border-color:var(--accent);
}

/* BUTTON BLOCK */

.form button{
margin-top:6px;
width:fit-content;   /* 🔥 kein full width button mehr */
}

/* MOBILE */

@media (max-width:900px){

.sidebar{
display:none;
}

.layout{
flex-direction:column;
}

.split{
grid-template-columns:1fr;
}

.form{
max-width:100%;
}

}