* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); background:var(--bg); color:var(--text); }
header { background:var(--hero); color:#fff; box-shadow:0 2px 14px rgba(10, 50, 100, .25); display:flex; gap:1rem; align-items:center; padding:.6rem 5%; flex-wrap:wrap; }
header h1 { font-size:1.1rem; margin:0; flex:1; }
header a, header button { color:#fff; background:rgba(255, 255, 255, .14); border:1px solid rgba(255, 255, 255, .4); padding:.35rem .8rem; cursor:pointer; text-decoration:none; font:inherit; }
nav.tabs { display:flex; gap:.25rem; flex-wrap:wrap; padding:.75rem 0 0; width:90%; margin:0 auto; }
nav.tabs button { border:1px solid var(--line); border-bottom:0; background:var(--tab-bg); color:var(--text); padding:.5rem 1rem; cursor:pointer; font:inherit; }
nav.tabs button.on { background:var(--surface); font-weight:bold; }
main { width:90%; margin:0 auto; background:var(--surface); border:1px solid var(--line); padding:1.25rem; margin-bottom:2rem; }
label { display:block; font-weight:bold; margin:.9rem 0 .25rem; }
input, select, textarea { width:100%; padding:.45rem; font:inherit; border:1px solid var(--line); background:var(--input-bg); color:var(--text); }
textarea { resize:vertical; }
button { font:inherit; cursor:pointer; color:var(--text); }
button.primary { background:var(--primary); color:#fff; border:0; padding:.6rem 1.4rem; margin-top:1rem; }
button.small { padding:.2rem .5rem; border:1px solid var(--line); background:var(--btn-bg); }
button.danger { color:var(--err-text); }
.row { display:flex; gap:.4rem; align-items:center; margin:.25rem 0; }
.row input:first-child { flex:1; } .row input.wide { flex:2; }
.card { border:1px solid var(--line); padding:.75rem; margin:.75rem 0; background:var(--card-bg); }
.hint { color:var(--muted); font-size:.85rem; margin:.25rem 0; }
#msg { position:fixed; bottom:1rem; right:1rem; padding:.7rem 1rem; color:#fff; display:none; max-width:80vw; }
#msg.ok { background:var(--green); display:block; } #msg.err { background:var(--red); display:block; }
.login { max-width:340px; margin:4rem auto; background:var(--surface); border:1px solid var(--line); padding:1.5rem; }
.pw { position:relative; }
.pw input { padding-right:2.5rem; }
.pw .eye { position:absolute; right:0; top:0; bottom:0; width:2.4rem; border:0; background:none; font-size:1.1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:.75rem; margin-top:1rem; }
.thumb { margin:0; } .thumb img { width:100%; height:130px; object-fit:contain; background:var(--surface); border:1px solid var(--line); }
.thumb code { display:block; overflow-wrap:anywhere; font-size:.8rem; margin-top:.3rem; }
.split { display:flex; gap:1rem; align-items:flex-start; }
.split aside { width:260px; flex:none; position:sticky; top:.5rem; }
.split aside .add { margin:0 0 .6rem; width:100%; }
.split aside input { margin-bottom:.5rem; }
.pagelist { max-height:70vh; overflow:auto; border:1px solid var(--line); }
.pagelist .item { display:block; width:100%; text-align:left; background:var(--surface); border:0; border-bottom:1px solid var(--line); padding:.5rem .6rem; }
.pagelist .item:hover { background:var(--hover); }
.pagelist .item.on { background:var(--blue); color:#fff; }
.pagelist .item small { display:block; opacity:.7; font-size:.75rem; }
.pagelist .hint { padding:.5rem; }
.editor { flex:1; min-width:0; }
.editor textarea { margin-top:.4rem; font-family:ui-monospace, Consolas, monospace; font-size:.92rem; }
.editor details { margin-top:.5rem; }
@media (max-width:700px) { .split { flex-direction:column; } .split aside { width:100%; position:static; } .editor { width:100%; } }
.meta { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin:.6rem 0; }
.meta label { display:inline-flex; align-items:center; gap:.5rem; margin:0; }
.meta label.plain { font-weight:normal; }
.meta input { width:auto; }
.grouprow input { flex:1; } .iconpick { display:inline-flex; align-items:center; gap:.3rem; }
.iconpick select { width:auto; max-width:11rem; } .iconprev { display:inline-flex; width:1.6rem; height:1.6rem; align-items:center; justify-content:center; color:var(--heading); }
.iconprev svg { width:1.3rem; height:1.3rem; }
.meta select { width:auto; }
.rolestable { border-collapse:collapse; width:100%; margin:.5rem 0; }
.rolestable th, .rolestable td { border:1px solid var(--line); padding:.45rem .7rem; text-align:left; vertical-align:top; }
.rolestable th { background:var(--surface-2); }
.check { display:flex; align-items:center; gap:.5rem; margin:.7rem 0 .1rem; font-weight:normal; } .check input { width:auto; }
.ldapresult { margin-top:.8rem; } .ldapresult .ok { color:var(--ok-text); } .ldapresult .bad { color:var(--err-text); }
.card h4 { margin:1.2rem 0 .2rem; }
@media (max-width:700px) { main, nav.tabs { width:auto; margin-left:.5rem; margin-right:.5rem; } header { padding:.6rem 1rem; } }

/* Markdown-Editor */
.mdeditor { margin-top:.4rem; border:1px solid var(--line); }
.mdtools { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; padding:.35rem; background:var(--surface-2); border-bottom:1px solid var(--line); }
.mdtools button { min-width:2rem; padding:.2rem .5rem; border:1px solid var(--line); background:var(--btn-bg); }
.mdtools button:hover:not(:disabled) { background:var(--hover); }
.mdtools button:disabled, .mdtools select:disabled { opacity:.45; cursor:default; }
.mdtools button.b { font-weight:bold; } .mdtools button.i { font-style:italic; }
.mdtools button.previewbtn.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.mdtools select { width:auto; padding:.2rem; }
.mdtools .sep { width:1px; align-self:stretch; background:var(--line); margin:0 .2rem; }
.mdtools .spacer { flex:1; }
.mdeditor textarea { display:block; margin:0; border:0; }
.mdeditor textarea[hidden] { display:none; }
.mdpreview { padding:1rem 1.25rem; line-height:1.5; min-height:10rem; max-height:70vh; overflow:auto; }
.mdpreview[hidden] { display:none; }
.mdpreview h1, .mdpreview h2, .mdpreview h3, .mdpreview h4 { color:var(--heading); }
.mdpreview h1 { margin-top:0; font-size:1.5rem; } .mdpreview h2 { font-size:1.2rem; }
.mdpreview img { max-width:100%; height:auto; }
.mdpreview table { border-collapse:collapse; margin:1rem 0; } .mdpreview th, .mdpreview td { border:1px solid var(--line); padding:.4rem .7rem; text-align:left; }
.mdpreview th { background:var(--surface-2); }
.mdpreview code { background:var(--surface-2); padding:.1rem .3rem; } .mdpreview pre { background:var(--surface-2); padding:.8rem; overflow:auto; } .mdpreview pre code { background:none; padding:0; }
.mdpreview blockquote { margin:1rem 0; padding:.2rem 1rem; border-left:4px solid var(--blue); background:var(--quote-bg); }
.mdpreview a { color:var(--link); }
.mdpreview .cal, .mdpreview .tf-embed { padding:.7rem 1rem; border:1px dashed var(--line); color:var(--muted); }
.meta input[type=text] { width:24rem; max-width:100%; }
.tagsuggest { display:flex; flex-wrap:wrap; gap:.3rem; margin:.2rem 0 .4rem; }
.meta label input[type=text] { font-weight:normal; }

/* ---------- Modernes Design (wie im Portal) ---------- */
header h1 { font-weight:750; letter-spacing:-.01em; }
header a, header button { border-radius:999px; transition:background .15s; }
header a:hover, header button:hover { background:rgba(255, 255, 255, .28); }
nav.tabs { gap:.3rem; }
nav.tabs button { border-radius:10px 10px 0 0; transition:background .12s; }
nav.tabs button:hover { background:var(--hover); }
nav.tabs button.on { color:var(--link); background:var(--surface); }
main { border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1.5rem; }
input, select, textarea { border-radius:8px; padding:.5rem .65rem; transition:border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--ring); }
button.primary { border-radius:10px; font-weight:600; box-shadow:0 2px 6px rgba(11, 98, 168, .25); transition:background .15s, transform .12s; }
button.primary:hover { background:var(--primary-hover); transform:translateY(-1px); }
button.small { border-radius:8px; transition:background .12s; }
button.small:hover { background:var(--hover); }
.card { border-radius:12px; }
.pagelist { border-radius:10px; }
.pagelist .item.on { background:var(--primary); }
.mdeditor { border-radius:10px; overflow:hidden; }
.mdtools button.previewbtn.on { background:var(--primary); border-color:var(--primary); }
.login { border-radius:var(--radius-lg); box-shadow:var(--shadow); }
#msg { border-radius:10px; box-shadow:var(--shadow-hover); }
.thumb img { border-radius:8px; }
.pbresult { margin-top:1rem; } .ok-line { color:var(--ok-text); } .bad-line { color:var(--err-text); }