:root{
    --bg: #0f1724;
    --card: #111827;
    --accent: #6d28d9; /* indigo */
    --muted: #94a3b8;
    --glass: rgba(255,255,255,0.04);
    --radius: 10px;
    --gap: 1.25rem;
    --max-width: 1100px;
    --accent-2: #d946ef;
    --text: #e6eef8;
}

*{box-sizing: border-box}
html,body{height:100%}
body{
    margin:0;
    min-height:100vh;
    background: linear-gradient(180deg, #071025 0%, #081428 60%);
    color:var(--text);
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display:grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr auto;
    gap: var(--gap);
    align-items:start;
    padding: 1.25rem;
}

header{
    grid-column: 1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg,var(--accent), var(--accent-2));
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(13, 12, 23, 0.6);
    color: #fff;
}
.flexheader{display:flex; align-items:center; gap:1rem; width:100%}
.flexheader img{height:56px; width:auto; border-radius:8px; background: var(--glass); padding:4px}
.flexheader h1{font-size:1.1rem; margin:0; font-weight:600}
.header-actions{margin-left:auto; display:flex; gap:0.5rem; align-items:center}
.header-actions a{color:rgba(255,255,255,0.95); text-decoration:none; background:rgba(255,255,255,0.06); padding:0.4rem 0.6rem; border-radius:8px; font-size:0.9rem}
.header-actions a:hover{background:rgba(255,255,255,0.12)}

nav{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-radius: var(--radius);
    padding:1rem;
    color:var(--text);
    font-weight:600;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    height: calc(100vh - 4.5rem);
    position:sticky;
    top:1.25rem;
}
nav h2{margin:0 0 .5rem 0; font-size:1rem}
nav a{color:var(--accent-2); text-decoration:none; padding:0.4rem 0; border-radius:6px}
nav a:hover{background: rgba(255,255,255,0.02)}

article{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:1.25rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(2,6,23,0.6);
    max-width: var(--max-width);
    width:100%;
    margin:0 auto;
}

.form-row{display:grid; grid-template-columns:160px 1fr; gap:0.75rem; align-items:center; margin-bottom:0.6rem}
label{color:var(--muted); font-size:0.95rem}
input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select{
    background: rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.04);
    color:var(--text);
    padding:0.6rem 0.75rem;
    border-radius:8px;
    outline:none;
    transition: box-shadow .15s, border-color .15s;
    width:100%;
}
input:focus{box-shadow:0 4px 18px rgba(109,40,217,0.12); border-color: rgba(109,40,217,0.6)}
button{
    background: linear-gradient(90deg,var(--accent-2), var(--accent));
    border:none;
    color:white;
    padding:0.6rem 1rem;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    box-shadow: 0 6px 18px rgba(109,40,217,0.18);
}
button:hover{opacity:0.95}

.inhalt{font-weight:600; line-height:1.6; color:var(--text)}
.flex{max-width:100%; margin:0 auto; padding-bottom:1em}
.flexheader{padding-bottom:0}

footer{
    grid-column: 1 / -1;
    text-align:center;
    padding:0.75rem;
    color:var(--muted);
}

@media (max-width: 900px){
    body{grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto}
    nav{position:relative; height:auto; order:2}
    article{order:3}
    header{flex-direction:column; align-items:flex-start}
    .form-row{grid-template-columns:1fr; gap:0.5rem}
}
.link{
    color: var(--accent-2);
    text-decoration: none;
    transform-origin: center;
    will-change: transform;
    transition: transform 260ms cubic-bezier(.2,.9,.3,1), color 160ms ease;
}
.link:hover{
    color: var(--accent);
    text-decoration: underline;
    transform: scale(1.06);
}