* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.5; }
a { color:var(--link); }
button, input, select, textarea { font-family:inherit; }

/* ---------- Kopfzeile ---------- */
.top { position:sticky; top:var(--inc-h, 0px); z-index:50; background:var(--hero); color:#fff; display:flex; align-items:center; gap:1rem; padding:.7rem 5%; box-shadow:0 2px 14px rgba(10, 50, 100, .25); }
.brand { flex:1; min-width:0; }
.title { font-size:1.5rem; font-weight:750; letter-spacing:-.01em; color:#fff; text-decoration:none; }
.claim { margin:.1rem 0 0; color:rgba(255, 255, 255, .85); font-size:.92rem; }
.claim a { color:#fff; }
.menu-btn { color:#fff; display:block; font-size:1.3rem; line-height:1; background:rgba(255, 255, 255, .14); border:1px solid rgba(255, 255, 255, .35); border-radius:10px; padding:.45rem .7rem; cursor:pointer; transition:background .15s; }
.menu-btn:hover { background:rgba(255, 255, 255, .26); }
#search { padding:.55rem 1rem; border:1px solid transparent; border-radius:999px; width:210px; font:inherit; background:rgba(255, 255, 255, .18); color:#fff; transition:background .15s, box-shadow .15s; }
#search::placeholder { color:rgba(255, 255, 255, .8); }
#search:focus { outline:none; background:var(--surface); color:var(--text); box-shadow:0 0 0 3px rgba(255, 255, 255, .35); }
#search:focus::placeholder { color:var(--muted); }
.logout { color:var(--primary); background:#fff; border:0; border-radius:999px; padding:.5rem 1.1rem; cursor:pointer; font:inherit; font-weight:600; transition:transform .12s, box-shadow .12s; }
.logout:hover { box-shadow:0 3px 10px rgba(0, 0, 0, .2); transform:translateY(-1px); }
.theme-btn { flex:none; display:inline-flex; align-items:center; justify-content:center; width:2.7rem; height:2.7rem; padding:0; border:2px solid #fff; border-radius:999px; background:rgba(255, 255, 255, .18); color:#fff; cursor:pointer; transition:background .12s; }
.theme-btn:hover { background:rgba(255, 255, 255, .34); }
.theme-btn svg { width:1.4rem; height:1.4rem; }
.whoami { color:rgba(255, 255, 255, .92); font-size:.9rem; }

/* ---------- Aufbau ---------- */
.layout { display:flex; align-items:flex-start; width:90%; margin:0 auto; }
.nav { width:290px; flex:none; padding:1.25rem 1.25rem 1.25rem 0; }
.content { flex:1; min-width:0; background:var(--surface); margin:1.25rem 0; padding:2rem 2.25rem; min-height:60vh; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); line-height:1.6; }
footer { text-align:center; padding:1.2rem; font-size:.85rem; color:var(--muted); }
body.nav-collapsed .nav { display:none; }

/* ---------- Menü ---------- */
.nav h2 { font-size:.95rem; margin:.9rem 0 .35rem; color:var(--on-nav); background:var(--nav-bg); border-radius:10px; padding:0; box-shadow:var(--shadow); }
.nav h2:first-child { margin-top:0; }
.nav h2 button { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:0; color:inherit; font:inherit; font-weight:650; text-align:left; padding:.6rem .85rem; cursor:pointer; border-radius:10px; }
.nav h2 button:hover { background:rgba(255, 255, 255, .1); }
.nav h2 button::after { content:"▾"; opacity:.8; }
.nav h2 button[aria-expanded="false"]::after { content:"▸"; }
.nav h2 button .gt { display:inline-flex; align-items:center; gap:.6rem; }
.nav ul { list-style:none; margin:0 0 .3rem; padding:.3rem; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.nav ul[hidden] { display:none; }
.nav li a { display:block; padding:.45rem .7rem; text-decoration:none; color:var(--text); border-radius:7px; transition:background .12s, color .12s; }
.nav li a:hover { background:var(--hover); color:var(--link); }
.nav svg.icon { width:1.15rem; height:1.15rem; flex:none; }
.nav svg.icon.lock, .tile svg.icon.lock { width:.85rem; height:.85rem; margin-left:.4rem; vertical-align:-1px; opacity:.55; }

/* ---------- Inhalt ---------- */
.content h1 { margin:0 0 1.1rem; font-size:1.85rem; font-weight:750; letter-spacing:-.015em; color:var(--heading); line-height:1.2; }
.content h1::after { content:""; display:block; width:52px; height:4px; border-radius:4px; background:var(--accent); margin-top:.6rem; }
.content h2 { font-size:1.3rem; color:var(--heading); margin:1.6rem 0 .6rem; }
.content h3, .content h4 { color:var(--heading); }
.content img, .content video { max-width:100%; height:auto; border-radius:10px; }
.content table { border-collapse:collapse; width:100%; margin:1rem 0; border:1px solid var(--line); }
.content th, .content td { border:0; border-bottom:1px solid var(--line); padding:.65rem .9rem; text-align:left; vertical-align:top; }
.content th { background:var(--surface-2); color:var(--heading); }
.content td:first-child { white-space:nowrap; }
.content code { background:var(--surface-2); padding:.1rem .35rem; border-radius:6px; }
.content pre { background:var(--surface-2); padding:.9rem 1rem; overflow:auto; border-radius:10px; }
.content pre code { background:none; padding:0; }
.content blockquote { margin:1rem 0; padding:.4rem 1.1rem; border-left:4px solid var(--blue); background:var(--quote-bg); border-radius:0 10px 10px 0; }
.content hr { border:0; border-top:1px solid var(--line); }

/* ---------- Startseite ---------- */
.content.home { padding:0; overflow:hidden; }
.hero { position:relative; overflow:hidden; background:var(--hero); color:#fff; padding:2.4rem 2.25rem 2.6rem; }
.hero::before, .hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255, 255, 255, .08); }
.hero::before { width:280px; height:280px; right:-70px; top:-90px; }
.hero::after { width:150px; height:150px; right:150px; bottom:-80px; background:rgba(255, 255, 255, .06); border:3px solid rgba(242, 145, 0, .55); background:transparent; }
.hero > * { position:relative; z-index:1; }
.content .hero h1 { color:#fff; margin:0 0 .5rem; font-size:2rem; max-width:34ch; line-height:1.15; }
.content .hero h1::after { display:none; }
.hero p { margin:0; font-size:1.08rem; opacity:.92; max-width:60ch; }
.greet { display:inline-block; background:rgba(255, 255, 255, .18); padding:.25rem .85rem; border-radius:999px; font-size:.9rem; margin-bottom:.9rem; }
.homebody { padding:1.6rem 2.25rem 2.25rem; }
.homebody h2:first-child { margin-top:0; }