:root { --accent:#7d7aff; --accent-ink:#fff; }
@media (prefers-color-scheme: light) { :root { --accent:#5856d6; } }
.chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { padding:7px 12px; border-radius:99px; font-size:.9rem; } .chip.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.list { list-style:none; margin:0; padding:0; } .list li { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.list li:last-child { border:0; } .grow { flex:1; min-width:180px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.tile-stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px; } .tile-stat .v { font-size:1.7rem; font-weight:700; } .tile-stat .l { color:var(--muted); font-size:.82rem; }
.track { background:var(--panel2); border-radius:6px; height:10px; overflow:hidden; } .track .fill { background:var(--accent); height:100%; } .track.ok .fill { background:var(--ok); }
.ok { color:var(--ok); } .bad { color:var(--bad); }
.runbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; } .runbar .track { flex:1; } .runbar .small { white-space:nowrap; }
.flash { min-height:220px; display:flex; flex-direction:column; justify-content:center; gap:14px; font-size:1.15rem; }
.flash .src { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.flash .back { border-top:1px dashed var(--line); padding-top:14px; }
.answer-row { display:flex; gap:10px; margin-top:14px; } .answer-row button { flex:1; padding:14px; font-size:1rem; }
.opt { display:block; width:100%; text-align:left; margin-top:8px; padding:12px 14px; }
.opt.right { border-color:var(--ok); background:color-mix(in srgb,var(--ok) 16%,transparent); } .opt.wrong { border-color:var(--bad); background:color-mix(in srgb,var(--bad) 16%,transparent); }
pre { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px; overflow-x:auto; margin:8px 0; font-size:.9rem; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; } :not(pre) > code { background:var(--panel2); padding:1px 6px; border-radius:6px; }
textarea.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem; min-height:170px; tab-size:4; white-space:pre; resize:vertical; }
.result-table { overflow:auto; max-height:260px; margin-top:10px; } .result-table table { font-size:.85rem; } .result-table th, .result-table td { padding:5px 8px; white-space:nowrap; }
.lvl { font-size:.72rem; padding:2px 8px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); color:var(--muted); }
.msg.good { background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); }
.test { font-family:ui-monospace,Menlo,monospace; font-size:.85rem; padding:4px 0; } .test.pass::before { content:'✓ '; color:var(--ok); } .test.fail::before { content:'✗ '; color:var(--bad); }
.er-q { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:8px 0; } .er-q select { width:auto; }
svg.er { width:100%; height:auto; background:var(--bg); border:1px solid var(--line); border-radius:10px; } svg.er text { fill:var(--text); font-size:12px; font-family:inherit; }
svg.er .ent { fill:var(--panel); stroke:var(--accent); stroke-width:1.5; } svg.er .rel { fill:var(--panel2); stroke:var(--warn); stroke-width:1.5; } svg.er line { stroke:var(--muted); stroke-width:1.5; }
svg.er .pk { text-decoration:underline; font-weight:700; } svg.er .card { fill:var(--accent); font-weight:700; }
.schema { font-size:.82rem; color:var(--muted); } details summary { cursor:pointer; color:var(--muted); font-size:.9rem; }
.bars { display:grid; gap:8px; } .hrow { display:grid; grid-template-columns:130px 1fr 54px; gap:10px; align-items:center; font-size:.9rem; } .hrow .n { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
svg.chart { width:100%; height:auto; } svg.chart .bar { fill:var(--accent); } svg.chart .bar.zero { fill:var(--line); } svg.chart text { fill:var(--muted); font-size:10px; }
.banner { border-color:var(--accent); }

/* ---- Editor ---- */
.ed { display:flex; background:var(--bg); border:1px solid var(--line); border-radius:8px; overflow:hidden; font:13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.ed .gutter { padding:10px 8px; text-align:right; color:var(--muted); background:var(--panel2); user-select:none; overflow:hidden; min-width:38px; }
.ed .edbody { position:relative; flex:1; min-width:0; }
.ed pre.hl, .ed textarea { margin:0; padding:10px 12px; border:0; border-radius:0; font:inherit; line-height:inherit; tab-size:4; white-space:pre; letter-spacing:0; }
.ed pre.hl { position:absolute; inset:0; overflow:hidden; pointer-events:none; background:transparent; color:var(--text); }
.ed textarea { position:relative; display:block; width:100%; background:transparent; color:transparent; caret-color:var(--text); resize:vertical; min-height:170px; overflow:auto; outline:none; }
.ed:focus-within { border-color:var(--accent); }
.ed textarea::selection { background:color-mix(in srgb,var(--accent) 40%,transparent); color:transparent; }
.tk-c { color:#6a9955; font-style:italic; } .tk-s { color:#e06c75; } .tk-i { color:#4ec9b0; } .tk-n { color:#d19a66; } .tk-k { color:#569cd6; font-weight:600; } .tk-f { color:#c678dd; } .tk-t { color:#4ec9b0; }
@media (prefers-color-scheme: light) { .tk-c { color:#2e7d32; } .tk-s { color:#c62828; } .tk-k { color:#0b5ed7; } .tk-f { color:#7b1fa2; } .tk-t, .tk-i { color:#00796b; } .tk-n { color:#b45309; } }
/* ---- SSMS-Fenster ---- */
.ssms { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); }
.ssms-bar { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--panel2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ssms-bar .srv { font-weight:600; font-size:.9rem; } .ssms-bar select { width:auto; padding:6px 8px; } .ssms-bar button { padding:6px 12px; } .ssms-bar .hint { display:none; } @media (min-width:900px) { .ssms-bar .hint { display:inline; } }
.ssms-body { display:grid; grid-template-columns:210px 1fr; min-height:340px; } @media (max-width:720px) { .ssms-body { grid-template-columns:1fr; } .explorer { max-height:150px; border-right:0 !important; border-bottom:1px solid var(--line); } }
.explorer { border-right:1px solid var(--line); padding:8px; overflow:auto; font-size:.84rem; max-height:520px; }
.explorer details { margin-left:12px; } .explorer > details { margin-left:0; } .explorer summary { cursor:pointer; padding:2px 0; list-style:none; } .explorer summary::-webkit-details-marker { display:none; }
.explorer summary::before { content:'▸ '; color:var(--muted); } .explorer details[open] > summary::before { content:'▾ '; }
.explorer ul { list-style:none; margin:0; padding:0 0 0 18px; } .explorer li { padding:1px 0; white-space:nowrap; } .dbitem { margin-left:24px; padding:2px 0; color:var(--muted); }
button.obj { all:unset; cursor:pointer; color:var(--accent); } button.obj:hover { text-decoration:underline; }
.ssms-main { min-width:0; display:flex; flex-direction:column; } .ssms-main .ed { border:0; border-radius:0; border-bottom:1px solid var(--line); }
.ssms-tabs { display:flex; gap:2px; background:var(--panel2); padding:4px 8px 0; border-bottom:1px solid var(--line); } .ssms-tabs button { border-radius:6px 6px 0 0; border-bottom:0; padding:5px 14px; font-size:.85rem; background:transparent; }
.ssms-tabs button.on { background:var(--panel); font-weight:600; }
.ssms-out { min-height:110px; max-height:340px; overflow:auto; } .ssms-out .result-table { max-height:none; margin:0; } .ssms-out .result-table table { font-size:.85rem; }
.result-table th { position:sticky; top:0; background:var(--panel2); } .result-table td.rn, .result-table th.rn { color:var(--muted); background:var(--panel2); text-align:right; font-size:.75rem; }
.null { color:var(--muted); font-style:italic; } pre.msgs, pre.plain { margin:0; border:0; border-radius:0; background:transparent; padding:10px 12px; white-space:pre-wrap; font-size:.85rem; } pre.plain { padding:0; }
.m-error { color:var(--bad); } .m-info { color:var(--text); } .m-ok { color:var(--ok); }
.ssms-status { display:flex; gap:8px; padding:5px 12px; background:color-mix(in srgb,var(--accent) 22%,var(--panel2)); font-size:.8rem; } .ssms-status .dot.ok { color:var(--ok); } .ssms-status .dot.bad { color:var(--bad); }
.sandbox { border-style:dashed; margin-bottom:14px; }

/* ---- Umschalter, Start, Themen, Konzepte ---- */
.seg { display:inline-flex; gap:2px; padding:3px; background:var(--fill); border-radius:13px; margin-bottom:18px; flex-wrap:wrap; max-width:100%; }
.seg button { background:transparent; border-radius:10px; min-height:34px; padding:6px 14px; } .seg button.on { background:var(--panel); color:var(--text); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.hero2 { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,var(--panel)),var(--panel)); border:1px solid var(--line); border-radius:18px; padding:22px; margin-bottom:16px; }
.hero2 h1 { margin:0 0 6px; font-size:1.6rem; } .hero2 p { margin:0 0 14px; color:var(--muted); } button.big { padding:12px 20px; font-size:1.05rem; }
.resume { margin-bottom:16px; } .resume-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .resume-list button { display:flex; gap:12px; justify-content:space-between; }
.tgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.topic { background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--tc); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:4px; }
.topic .th { display:flex; justify-content:space-between; align-items:center; } .topic .ti { font-size:2.2rem; } .topic h3 { margin:6px 0 0; }
.topic .tb { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; } .topic .tb .primary { grid-column:1 / -1; }
.ring { --size:62px; width:var(--size); height:var(--size); border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--panel2) 0); position:relative; }
.ring::before { content:''; position:absolute; inset:7px; background:var(--panel); border-radius:50%; } .ring span { position:relative; font-size:.82rem; font-weight:700; }
.tip { font-size:.95rem; }
/* Karten */
.flash { border-left:5px solid var(--tc, var(--accent)); } .flash .q { font-size:1.2rem; } .tdot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--tc, var(--accent)); margin-right:6px; }
.flash .back { animation:pop .25s ease-out; } @keyframes pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.vis { margin-top:14px; padding:12px; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
/* Visualisierungen */
.vgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; } figure { margin:0; text-align:center; } figcaption { font-size:.78rem; color:var(--muted); }
svg .vf { fill:var(--accent); opacity:.7; } svg .vo { fill:none; stroke:var(--muted); stroke-width:2; } .vn svg text, .rd svg text { fill:var(--text); font-size:14px; font-weight:700; }
.rd svg line { stroke:var(--muted); stroke-width:2; } .rd .ln { fill:var(--accent); } .rd .rn2 { fill:var(--warn); } .rd svg text.k { fill:var(--accent); font-size:16px; text-anchor:middle; }
table.mini { border-collapse:separate; border-spacing:0; font-size:.85rem; margin:4px 0; } table.mini caption { text-align:left; font-weight:700; padding-bottom:4px; color:var(--text); }
table.mini th, table.mini td { border:1px solid var(--line); padding:4px 10px; } table.mini th { background:var(--panel2); font-weight:600; }
td.lk { background:color-mix(in srgb,var(--c) 30%,transparent); font-weight:700; }
.keys { display:flex; gap:16px; align-items:center; flex-wrap:wrap; } .keys .arrow { color:var(--muted); font-size:.85rem; }
.jgrid { display:grid; grid-template-columns:1fr 150px 1fr; gap:12px; align-items:center; } @media (max-width:720px) { .jgrid { grid-template-columns:1fr; } .jv { max-width:180px; margin:0 auto; } }
tr.match td { background:color-mix(in srgb,var(--ok) 20%,transparent); } tr.orph td { background:color-mix(in srgb,var(--warn) 22%,transparent); } tr.out td { opacity:.4; text-decoration:line-through; }
.slice .sl-row { display:flex; gap:3px; flex-wrap:wrap; } .sl-cell { display:flex; flex-direction:column; align-items:center; min-width:34px; padding:4px 2px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); }
.sl-cell b { font-size:1.1rem; } .sl-cell small { color:var(--muted); font-size:.68rem; } .sl-cell.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .sl-cell.on small { color:inherit; }
.sl-res { margin-top:10px; }
.stepper { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; } .stepper button.on { background:var(--accent); color:var(--accent-ink); }
.nfrow { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
/* ER-Baukasten */
.eb-top { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px; margin-bottom:10px; } .eb-top #mname { max-width:280px; font-weight:600; }
.eb-top select { width:auto; }
.eb-tools { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; } .eb-tools button.on { background:var(--warn); color:#1a1200; border-color:var(--warn); } .eb-hint { margin:0 0 8px; min-height:1.3em; }
.eb-main { display:grid; grid-template-columns:1fr 290px; gap:12px; align-items:start; } @media (max-width:900px) { .eb-main { grid-template-columns:1fr; } }
.eb-canvas { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; max-height:70vh; background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:20px 20px; }
.eb-canvas svg { width:100%; min-width:560px; display:block; touch-action:none; user-select:none; } .eb-canvas svg text { pointer-events:none; }
.eb-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px; } .eb-panel h3 { margin:0 0 8px; font-size:1rem; }
.attr { display:grid; grid-template-columns:1fr 96px auto auto; gap:6px; align-items:center; margin-bottom:6px; } .attr input, .attr select { padding:6px 8px; font-size:.85rem; } .attr .pk { display:flex; gap:3px; align-items:center; margin:0; font-size:.85rem; color:var(--text); } .attr .pk input { width:auto; }
.issues { margin:0; padding-left:18px; color:var(--warn); font-size:.88rem; } .bad2 { color:var(--warn); }
@media (max-width:720px) { nav.tabs { margin-left:-4px; } .attr { grid-template-columns:1fr 84px auto auto; } }

/* ---- Navigation: oben (Tablet/Desktop), unten wie iOS (Handy) ---- */
.topnav { position:sticky; top:0; z-index:20; display:flex; gap:2px; padding:4px; margin:4px 0 20px; overflow-x:auto; scrollbar-width:none; border-radius:16px;
  background:color-mix(in srgb,var(--panel) 72%,transparent); backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px); border:1px solid var(--line); }
.topnav::-webkit-scrollbar { display:none; } .topnav button { flex:none; background:transparent; border-radius:12px; white-space:nowrap; } .topnav button.on { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.tabbar, .sheet, .scrim { display:none; }
@media (max-width:720px) {
  .topnav { display:none; } .wrap { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--panel) 78%,transparent);
    backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px); border-top:1px solid var(--line); }
  .tabbar button { flex:1; flex-direction:column; gap:1px; min-height:52px; padding:4px 2px; border-radius:12px; background:transparent; color:var(--muted); font-size:.68rem; font-weight:500; }
  .tabbar button .ti { font-size:1.45rem; line-height:1.1; filter:grayscale(.9); opacity:.8; } .tabbar button.on { color:var(--accent); } .tabbar button.on .ti { filter:none; opacity:1; }
  .scrim.show { display:block; position:fixed; inset:0; z-index:44; background:rgba(0,0,0,.45); animation:fade .2s; }
  .sheet.show { display:block; position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--panel); border-radius:22px 22px 0 0; padding:10px 12px calc(16px + env(safe-area-inset-bottom)); animation:up .28s cubic-bezier(.2,.9,.3,1); box-shadow:0 -10px 40px rgba(0,0,0,.35); }
  .sheet .grab { width:38px; height:5px; border-radius:3px; background:var(--fill); margin:2px auto 10px; }
  .sheet button { display:flex; width:100%; justify-content:flex-start; gap:12px; font-size:1.05rem; padding:12px 14px; min-height:52px; border-radius:14px; background:transparent; border-bottom:0; } .sheet button.on { color:var(--accent); font-weight:600; background:var(--fill); }
  .sheet .sl { font-size:1.4rem; width:30px; text-align:center; }
  @keyframes up { from { transform:translateY(100%); } } @keyframes fade { from { opacity:0; } }
  .flash { min-height:180px; font-size:1.05rem; } .flash .q { font-size:1.12rem; } .answer-row button { min-height:52px; }
  .hero2 { padding:18px; border-radius:20px; } .hero2 h1 { font-size:1.35rem; } .count .num { font-size:5rem; }
  .eb-top #mname { max-width:100%; flex:1 1 100%; } .jgrid { gap:8px; }
}
/* Tablet: etwas mehr Luft, zweispaltige Raster */
@media (min-width:721px) and (max-width:1024px) { .tgrid { grid-template-columns:repeat(3,1fr); } .eb-main { grid-template-columns:1fr 260px; } }
.card { border-radius:20px; } .opt { border-radius:14px; min-height:48px; } .flash { border-radius:22px; }

.dragghost { position:fixed; left:0; top:0; z-index:100; pointer-events:none; padding:8px 14px; border-radius:10px; background:var(--panel); border:2px solid var(--accent); color:var(--text); font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:.95; }
.eb-canvas.drop { outline:3px dashed var(--accent); outline-offset:-3px; }
.eb-tools button#add-e { cursor:grab; } .eb-tools button#add-e:active { cursor:grabbing; } .eb-canvas svg [data-e], .eb-canvas svg [data-r] { cursor:grab; } .eb-canvas svg [data-e]:active, .eb-canvas svg [data-r]:active { cursor:grabbing; }

.eb-tools .nt { flex:none; padding:2px; } .eb-tools .nt button { min-height:30px; padding:4px 11px; font-size:.85rem; }
label.chk { display:flex; gap:8px; align-items:center; color:var(--text); margin:12px 0 4px; font-size:.9rem; } label.chk input { width:auto; }
.attr2 { border:1px solid var(--line); border-radius:12px; padding:8px; margin-bottom:8px; display:grid; gap:6px; background:var(--panel2); }
.attr2 .a1 { display:grid; grid-template-columns:1fr auto; gap:6px; } .attr2 .a2 { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; align-items:center; }
.attr2 input, .attr2 select { padding:6px 8px; font-size:.85rem; min-height:36px; } .attr2 .pk { display:flex; gap:3px; align-items:center; margin:0; font-size:.85rem; color:var(--text); } .attr2 .pk input { width:auto; min-height:0; }
.eb-panel select { min-height:38px; padding:6px 10px; }

/* ---- VS Code (Dark+) ---- */
.vsc { --vb:#1e1e1e; --vs:#252526; --va:#333333; --vbd:#3c3c3c; --vt:#d4d4d4; --vm:#858585; border:1px solid #3c3c3c; border-radius:10px; overflow:hidden; background:var(--vb); color:var(--vt); font:13px/1.5 "Segoe UI",system-ui,sans-serif; -webkit-user-select:none; user-select:none; }
.vsc * { box-sizing:border-box; } .vsc button { all:unset; cursor:pointer; box-sizing:border-box; }
.vsc-title { display:flex; align-items:center; gap:12px; height:30px; padding:0 12px; background:#323233; color:#cccccc; font-size:12px; } .vsc-title .ttl { flex:1; text-align:center; margin-right:44px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dots { display:flex; gap:7px; } .dots i { width:11px; height:11px; border-radius:50%; background:#ff5f57; } .dots i:nth-child(2) { background:#febc2e; } .dots i:nth-child(3) { background:#28c840; }
.vsc-body { display:grid; grid-template-columns:44px 170px 1fr; min-height:420px; } @media (max-width:720px) { .vsc-body { grid-template-columns:1fr; } .vsc-act, .vsc-side { display:none; } }
.vsc-act { background:var(--va); display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:6px; } .vsc-act span { width:44px; height:44px; display:grid; place-items:center; color:#858585; } .vsc-act span.on { color:#fff; box-shadow:inset 2px 0 0 #fff; }
.vsc-side { background:var(--vs); padding:6px 0; font-size:12px; } .vsc-h { padding:6px 14px; color:#bbbbbb; font-size:11px; letter-spacing:.04em; } .vsc-folder { padding:2px 14px; font-weight:700; font-size:11px; color:#cccccc; }
.vsc-file { display:flex !important; gap:6px; align-items:center; padding:3px 14px 3px 26px; width:100%; color:#cccccc; } .vsc-file:hover { background:#2a2d2e; } .vsc-file.on { background:#37373d; color:#fff; }
.vsc-main { display:flex; flex-direction:column; min-width:0; background:var(--vb); }
.vsc-tabs { display:flex; align-items:stretch; background:var(--vs); height:35px; } .vsc-tabs .tabset { display:flex; flex:1; overflow-x:auto; scrollbar-width:none; }
.vsc-tab { display:flex !important; align-items:center; gap:8px; padding:0 14px; background:#2d2d2d; color:#969696; border-right:1px solid #252526; white-space:nowrap; font-size:13px; } .vsc-tab.on { background:var(--vb); color:#fff; box-shadow:inset 0 1px 0 #007acc; } .vsc-tab .mod { color:#d4d4d4; font-size:10px; }
.vsc-run { display:grid !important; place-items:center; width:40px; color:#89d185; font-size:18px; } .vsc-run:hover { background:#2a2d2e; } .vsc-run:disabled { opacity:.4; }
.vsc-editor .ed, .vsc-viewer { border:0 !important; border-radius:0 !important; background:var(--vb) !important; }
.vsc .ed { background:var(--vb); font:14px/1.55 Consolas,"SF Mono",Menlo,monospace; color:var(--vt); -webkit-user-select:text; user-select:text; } .vsc .ed .gutter { background:var(--vb); color:#858585; min-width:46px; padding:10px 10px 10px 8px; }
.vsc .ed .gutter .ln.err { color:#f14c4c; font-weight:700; background:rgba(241,76,76,.14); margin:0 -10px 0 -8px; padding:0 10px 0 8px; } .vsc .ed pre.hl { color:var(--vt); } .vsc .ed textarea { caret-color:#aeafad; min-height:250px; }
.vsc .ed .tk-c { color:#6a9955; font-style:normal; } .vsc .ed .tk-s { color:#ce9178; } .vsc .ed .tk-n { color:#b5cea8; } .vsc .ed .tk-k { color:#569cd6; font-weight:400; } .vsc .ed .tk-ctl { color:#c586c0; }
.vsc .ed .tk-f, .vsc .ed .tk-fn, .vsc .ed .tk-d { color:#dcdcaa; } .vsc .ed .tk-cls { color:#4ec9b0; } .vsc .ed .tk-self { color:#9cdcfe; }
.vsc .ed:focus-within { border-color:transparent; }
.vsc-viewer { min-height:250px; max-height:420px; overflow:auto; padding:10px 14px; font:14px/1.55 Consolas,"SF Mono",Menlo,monospace; -webkit-user-select:text; user-select:text; } .vsc-viewer pre { margin:0; border:0; background:transparent; padding:0; color:var(--vt); white-space:pre-wrap; }
.vsc-viewer .tk-c { color:#6a9955; } .vsc-viewer .tk-s { color:#ce9178; } .vsc-viewer .tk-n { color:#b5cea8; } .vsc-viewer .tk-k { color:#569cd6; } .vsc-viewer .tk-ctl { color:#c586c0; } .vsc-viewer .tk-f, .vsc-viewer .tk-fn, .vsc-viewer .tk-d { color:#dcdcaa; } .vsc-viewer .tk-cls { color:#4ec9b0; } .vsc-viewer .tk-self { color:#9cdcfe; }
.vsc-panel { border-top:1px solid var(--vbd); background:var(--vb); } .vsc-ptabs { display:flex; gap:18px; padding:0 14px; height:30px; align-items:center; font-size:11px; letter-spacing:.03em; }
.vsc-ptabs button { color:#969696; height:30px; display:flex !important; align-items:center; gap:4px; } .vsc-ptabs button.on { color:#e7e7e7; box-shadow:inset 0 -1px 0 #e7e7e7; } .vsc-ptabs b { background:#4d4d4d; border-radius:9px; padding:0 6px; font-weight:400; } .vsc-ptabs b:empty { display:none; }
.vsc-term { margin:0; padding:6px 14px 12px; min-height:130px; max-height:300px; overflow:auto; background:var(--vb); border:0; border-radius:0; color:#cccccc; font:12.5px/1.5 Consolas,"SF Mono",Menlo,monospace; white-space:pre-wrap; -webkit-user-select:text; user-select:text; }
.t-red { color:#f48771; } .t-green { color:#89d185; } .t-dim { color:#8b8b8b; } .t-bold { color:#e7e7e7; font-weight:700; } .t-cursor { animation:blink 1.1s steps(2) infinite; } @keyframes blink { 50% { opacity:0; } }
.vsc-status { display:flex; gap:16px; align-items:center; background:#007acc; color:#fff; font-size:12px; height:24px; padding:0 12px; overflow:hidden; white-space:nowrap; } .vsc-status .grow { flex:1; }
@media (max-width:720px) { .vsc-status span:nth-last-child(-n+4) { display:none; } .vsc .ed { font-size:13px; } }

/* ---- Lernmodus & Sandbox ---- */
.learn-toggle { display:inline-flex !important; align-items:center; gap:8px; padding:5px 8px 5px 14px !important; } .learn-toggle i { width:38px; height:22px; border-radius:99px; background:rgba(120,120,128,.4); position:relative; transition:background .2s; }
.learn-toggle i::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; } .learn-toggle.on { background:color-mix(in srgb,var(--accent) 22%,var(--fill)); } .learn-toggle.on i { background:var(--accent); } .learn-toggle.on i::after { transform:translateX(16px); }
.learnbox { margin-top:12px; padding:14px 16px; border-radius:var(--radius); background:color-mix(in srgb,var(--accent) 10%,var(--panel)); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); -webkit-user-select:text; user-select:text; }
.lhead { font-weight:700; margin-bottom:8px; } .lh { padding:8px 0; border-top:1px solid var(--line); } .lh:first-of-type { border-top:0; } .lh.err { color:var(--text); border-left:3px solid var(--bad); padding-left:10px; }
.lsql { display:block; margin-bottom:6px; color:var(--muted); } .lrow { display:grid; grid-template-columns:96px 1fr; gap:10px; font-size:.9rem; padding:2px 0; } .lk { font-weight:700; color:var(--accent); font-size:.8rem; letter-spacing:.03em; }
@media (max-width:560px) { .lrow { grid-template-columns:1fr; gap:0; } }
.sbx-tools { margin-top:12px; } .sbx-tools select { width:auto; max-width:100%; } .sbx-tools .grow { flex:1; }

/* ---- Eigene SQL-Server & ER live ---- */
.srvgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:14px; }
.srv { display:flex; flex-direction:column; gap:2px; } .srv .ic { font-size:2rem; line-height:1.2; } .srv.new { border-style:dashed; } .srv.new .ic { color:var(--accent); font-weight:300; }
.sbx-layout { display:grid; gap:14px; align-items:start; } @media (min-width:1100px) { .sbx-layout.with-er { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.erlive { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px; } .erl-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .erl-head .grow { flex:1; }
.erl-head .nt { flex:none; padding:2px; } .erl-head .nt button { min-height:30px; padding:4px 11px; font-size:.85rem; }
.erl-opts { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; } .erl-opts label.chk { margin:0; }
.erl-canvas { max-height:640px; } .erl-canvas svg { min-width:420px; } .erl-empty { padding:28px; text-align:center; }
.sbx-er { position:sticky; top:64px; } @media (max-width:1099px) { .sbx-er { position:static; } }

/* ---- Fach-Seiten: einheitlicher Kopf ---- */
.subj { display:flex; gap:14px; align-items:center; margin:2px 0 14px; } .subj .si { font-size:2.4rem; line-height:1; width:58px; height:58px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 28%,var(--panel2)),var(--panel2)); box-shadow:inset 0 0 0 1px var(--line); flex:none; }
.subj h1 { margin:0; font-size:1.6rem; letter-spacing:-.02em; }
#subj-body > .seg { display:flex; width:100%; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; } #subj-body > .seg::-webkit-scrollbar { display:none; } #subj-body > .seg button { flex:1 0 auto; white-space:nowrap; }
@media (max-width:640px) { .subj .si { width:48px; height:48px; font-size:2rem; } .subj h1 { font-size:1.35rem; } #subj-body > .seg button { padding:6px 10px; font-size:.9rem; } }
/* Kopfzeile aufgeräumt (Handy/Tablet) */
header.top h1 { white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:720px) { header.top { gap:8px; } header.top h1 { font-size:1.3rem; } header.top .hide-s { display:none; } .learn-toggle { padding:5px 8px 5px 12px !important; } }

/* ---- Lernen: Fach-Auswahl, Lektionen ---- */
.seg.subjects { display:flex; width:100%; margin-bottom:10px; padding:4px; } .seg.subjects button { flex:1; padding:9px 10px; font-weight:600; font-size:1rem; }
.subj-desc { margin:0 0 12px; }
ol.lessons { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
button.lesson { all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow); }
button.lesson:hover { border-color:var(--accent); } button.lesson:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent); }
.lesson .lnum { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--fill); font-weight:700; flex:none; } .lesson.done .lnum { background:var(--ok); color:#fff; }
.lesson .lt { flex:1; display:flex; flex-direction:column; min-width:0; }
.lessonbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.lesson.card { padding:20px 22px; } .lesson.card h3 { margin:22px 0 8px; font-size:1.15rem; } .lp { margin:10px 0; line-height:1.6; } .lp, .llist, .lq, .lnote, .ltip { -webkit-user-select:text; user-select:text; }
.llist { margin:10px 0; padding-left:22px; line-height:1.6; } .llist li { margin:4px 0; }
.lnote, .ltip { display:flex; gap:10px; padding:12px 14px; border-radius:14px; margin:12px 0; line-height:1.55; } .lnote { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); } .ltip { background:color-mix(in srgb,var(--warn) 10%,var(--panel)); border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line)); }
.ex { margin:14px 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel2); } .ex.er { padding:10px; background:var(--panel); }
.exh { display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:.82rem; color:var(--muted); } .exh .grow { flex:1; } .exh button { min-height:30px !important; padding:3px 12px !important; font-size:.85rem; }
.ex .ed { border-radius:0; border-left:0; border-right:0; } .exout { padding:0 10px 10px; } .exout .result-table { max-height:220px; margin:8px 0 0; } .exout .msg { margin:8px 0 0; }
pre.lout, pre.lerr { margin:8px 0 0; white-space:pre-wrap; font-size:.85rem; } pre.lout { background:var(--bg); } pre.lerr { color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,var(--line)); }
.lhelp { margin-top:8px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb,var(--accent) 12%,var(--panel)); font-size:.9rem; -webkit-user-select:text; user-select:text; } .exexp { padding:0 12px 12px; }
.lq { margin:16px 0; padding:14px 16px; border:1px dashed var(--accent); border-radius:14px; } .lqx { margin-top:10px; font-size:.92rem; } pre.gen { margin:8px 0; max-height:260px; overflow:auto; }
.lessonend { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; }
.lconcept > .seg { margin-top:6px; }