:root{color-scheme:light;--ink:#193737;--muted:#607574;--line:#d9e3de;--paper:#f4f6f2;--accent:#087969;--soft:#e6f3ed;--orange:#aa601b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}header{padding:22px 32px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:14px;align-items:center}.brand strong{font-size:22px;letter-spacing:-.7px}.brand small{display:block;color:var(--muted)}.logo{display:grid;place-items:center;background:var(--ink);color:#fff;font-size:30px;width:48px;height:48px;border-radius:13px}.badge,.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:750}.badge{border:1px solid var(--line);padding:8px 12px;border-radius:30px}.connection{display:flex;align-items:end;gap:16px;padding:16px 32px;background:#fff;border-bottom:1px solid var(--line)}.connection label{flex:1;max-width:400px;margin-bottom:0}.connection input,.connection #check{height:42px}.connection #health{font-size:12px;align-self:center;max-width:260px}label{display:block;font-size:12px;font-weight:650;margin-bottom:9px}input,select,textarea{display:block;width:100%;border:1px solid #c7d5cf;background:#fff;color:var(--ink);font:inherit;font-size:14px;border-radius:7px;padding:9px 10px;margin-top:5px}textarea{resize:vertical;min-height:75px;line-height:1.55}input:focus,textarea:focus,select:focus,button:focus-visible,summary:focus-visible{outline:2px solid #50af9c;outline-offset:2px}input[type=checkbox]{display:inline;width:auto;margin:0 8px 0 0}button,.import{font:inherit;font-size:12px;font-weight:650;cursor:pointer;border-radius:7px;padding:10px 13px;border:1px solid var(--accent);background:var(--accent);color:#fff}button:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:wait}.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}.wide{width:100%}.import{display:block;text-align:center;margin-top:8px}.import input{position:absolute;width:1px;height:1px;opacity:0}.import:focus-within{outline:2px solid var(--accent)}main{display:grid;grid-template-columns:235px minmax(430px,1fr) minmax(300px,380px);max-width:1800px;margin:auto}aside{padding:26px 20px;border-right:1px solid var(--line)}.workspace{--wx:28px;padding:26px var(--wx) 0;min-width:0}.results{padding:26px 22px;border-left:1px solid var(--line);background:#eef2ed;min-width:0}h1{font-size:26px;letter-spacing:-.8px;line-height:1.2;margin:8px 0 12px}h2{font-size:18px;margin:6px 0 12px;letter-spacing:-.35px}h3{font-size:14px;margin:22px 0 8px}p{margin:8px 0 16px}.section-heading>p,.muted{color:var(--muted);font-size:12px}.eyebrow{color:var(--accent)}.section-heading{margin-bottom:20px}.type-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:22px 0}.type-guide>div{padding:12px;background:var(--soft);border:1px solid #cce4d9;border-radius:8px}.type-guide b{color:var(--accent)}.type-guide span,.type-guide small{display:block;font-size:12px;margin-top:4px}.type-guide small{font-size:10px;color:var(--muted)}.toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:16px 0}.toolbar>span{font-size:12px;max-width:50%;overflow-wrap:anywhere}.tab{background:transparent;color:var(--muted);border:0;padding:7px}.tab.active{color:var(--accent);background:var(--soft)}.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;margin:12px 0}.card h2 small{display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--muted)}.content-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}.content-toolbar select{width:100px;font-size:11px;padding:5px;margin:0}.content-toolbar label{margin:0}.question-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}.question-header b{color:var(--accent);text-transform:uppercase;letter-spacing:1px;font-size:10px}.question-header input{margin:0;min-width:0}.question-header button{padding:6px 9px}.criteria-row{padding:10px;background:#f5f8f5;border-radius:7px;margin:8px 0}.criteria-row>.toolbar{margin:0 0 6px}.criteria-row .toolbar label{flex:1}.criteria-row textarea{min-height:55px}.questions-heading{display:flex;justify-content:space-between;align-items:center;margin-top:25px;margin-bottom:8px}.questions-heading h2{margin:0}.questions-heading .muted{font-size:10px}.add-buttons,.actions{display:flex;gap:8px;flex-wrap:wrap}.actions{padding-top:20px;margin-top:12px;border-top:1px solid var(--line)}#run{flex:1;font-size:13px;display:flex;justify-content:space-between;gap:15px}.example{display:block;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);padding:12px;margin-top:9px;width:100%}.example.selected{border-color:var(--accent);background:var(--soft)}.example span{display:block;font-size:11px;color:var(--muted);margin-top:6px}.example strong{display:block;font-size:12px;font-weight:600}.example .chips{font-size:9px;letter-spacing:.3px;text-transform:uppercase;color:var(--accent)}.empty{padding:40px 5px;color:var(--muted)}.empty>span{font-size:42px;color:#93b9a8}.empty h3{font-size:21px;letter-spacing:-.5px;color:var(--ink)}.empty p{font-size:13px}.result-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;margin:14px 0;overflow-wrap:anywhere}.result-card h3{margin:0 0 8px}.result-card .question-text{color:var(--muted);font-size:12px}.value{font-size:30px;font-weight:650;letter-spacing:-1px;margin:14px 0 6px;color:var(--accent)}.bar-label{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin:10px 0 4px}.bar{height:8px;accent-color:var(--accent);width:100%;display:block;border:0;border-radius:5px;overflow:hidden}.bar::-webkit-progress-bar{background:#e6eee9}.bar::-webkit-progress-value{background:var(--accent)}.bar::-moz-progress-bar{background:var(--accent)}.result-card small{font-size:11px;color:var(--muted)}.notice{background:#fff1d6;border:1px solid #ead1a2;color:#72541b;padding:12px;border-radius:7px;font-size:12px}#remote-notice{margin:12px 32px}#remote-notice label{margin:0}.error{background:#fce8e4;color:#963c29;padding:14px;margin-top:12px;border-radius:7px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.hidden{display:none!important}details{border-top:1px solid var(--line);padding:13px 0}summary{cursor:pointer;font-size:12px;font-weight:650;margin-bottom:10px}pre,.code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}pre{background:#e5ece6;padding:12px;border-radius:6px;max-height:550px;overflow:auto}.code{min-height:360px}.caveat{font-size:11px;margin-top:22px}footer{border-top:1px solid var(--line);padding:16px 32px;font-size:11px;color:var(--muted)}#result-meta{font-size:11px;color:var(--muted)}.expected{margin-top:14px;border-top:1px solid var(--line);padding-top:8px;font-size:11px;color:var(--muted)}@media(min-width:1500px){main{grid-template-columns:260px minmax(500px,1fr) 410px}.workspace{--wx:38px;padding-top:32px}}#examples{max-height:65vh;overflow:auto;padding-right:3px}.score-scale{display:block;width:100%;height:20px;margin:12px 0;accent-color:var(--accent)}.connection-area{padding:18px 32px;background:#fff;border-bottom:1px solid var(--line)}.connection-select{display:flex;align-items:end;gap:20px}.connection-select label{width:280px;margin:0}.connection-select strong{font-size:12px;color:var(--accent);padding-bottom:10px}.connection-area .connection{padding:0;border:0;flex-wrap:wrap}.connection-area .connection label{max-width:480px}.connection-area #health{font-size:12px;color:var(--muted);margin-top:12px}.connection-area input[readonly]{background:#f1f4f0;color:var(--muted)}.manual-token{display:flex;gap:8px;align-items:end;max-width:770px;margin-top:14px}.manual-token label{flex:1;margin:0}.manual-token input,.manual-token button{height:42px}.manual-token input{font-family:ui-monospace,monospace}.connection-area #connection-hint{margin:8px 0 14px;max-width:950px}
/* Sidebar: sticky, eine Scrollregion, gruppierte kompakte Beispiele */
main{grid-template-columns:290px minmax(430px,1fr) minmax(300px,380px)}
aside{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;overscroll-behavior:contain;padding:22px 16px 30px}
aside .section-heading{margin-bottom:14px}
.start-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.start-actions button,.start-actions .import{margin:0;padding:9px 6px;font-size:11px;white-space:nowrap}
aside h3{margin:20px 0 4px}aside>.muted{margin:0 0 10px}
#search{margin:0 0 8px;padding:8px 10px;font-size:12px}
.chip-row{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.chip{padding:4px 9px;font-size:11px;font-weight:600;border-radius:20px;background:#fff;color:var(--muted);border:1px solid var(--line)}
.chip.active{background:var(--soft);color:var(--accent);border-color:var(--accent)}
#examples{max-height:none;overflow:visible;padding:0;margin-top:8px}
.group{border:0;border-top:1px solid var(--line);padding:6px 0 4px;margin:0}
.group summary{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 2px;margin:0;font-size:12px}
.group summary .count{font-size:10px;font-weight:700;color:var(--muted);background:#eef2ed;padding:2px 7px;border-radius:10px}
.example{padding:9px 10px;margin:6px 0;border-radius:8px;color:var(--ink)}
.example.multi{background:#fff;border:1px solid var(--line)}
.example.multi.selected,.example.selected{border-color:var(--accent);background:var(--soft)}
.example .title{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:650;line-height:1.3}
.example .lang{font-size:9px;letter-spacing:.6px;font-weight:750;padding:1px 5px;border-radius:4px;background:#eef2ed;color:var(--muted);flex:none}
.example .state{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.example .chips{margin-top:6px}
.qrow{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.qpick{display:flex;gap:5px;align-items:baseline;padding:4px 7px;font-size:10px;font-weight:600;border-radius:6px;background:#fff;color:var(--ink);border:1px solid var(--line)}
.qpick small{font-size:8px;letter-spacing:.4px;text-transform:uppercase;color:var(--accent)}
.qpick.selected{background:var(--accent);border-color:var(--accent);color:#fff}.qpick.selected small{color:#dff3ec}
@media(min-width:1500px){main{grid-template-columns:310px minmax(500px,1fr) 410px}}

/* Kopf und Verbindungsleiste kompakt: mehr Höhe für die drei Arbeitsspalten */
header{padding:10px 32px}.logo{width:36px;height:36px;font-size:22px;border-radius:10px}.brand strong{font-size:18px}.brand small{font-size:11px}
.connection-area{display:flex;flex-wrap:wrap;align-items:end;gap:10px 16px;padding:10px 32px}
.connection-area .connection-select{gap:10px;align-items:end}.connection-area .connection-select label{width:220px}
.connection-area .connection-select strong{display:none}
.connection-area #connection-hint{flex-basis:100%;margin:0}.connection-area #connection-hint:empty{display:none}
.connection-area .connection{flex:1;min-width:420px;gap:10px;align-items:end}
.connection-area .connection label{flex:1;min-width:140px;max-width:none}.connection-area .connection label:first-child{flex:2}
.connection-area label{font-size:11px;margin:0}.connection-area input,.connection-area select,.connection-area #check{height:36px;padding:6px 10px;font-size:13px;margin-top:4px}
.connection-area #health{margin:0 0 9px;max-width:none;white-space:nowrap}
/* Drei-Spalten-Arbeitsfläche: Kopf bleibt stehen, jede Spalte scrollt für sich */
html,body{height:100%}body{display:flex;flex-direction:column}
header,.connection-area,#remote-notice,footer{flex:none}
main{flex:1;min-height:0;width:100%;max-width:none;margin:0}
aside,.workspace,.results{min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain}
aside{position:static;max-height:none}
footer{padding:7px 32px;font-size:10px}
/* Ein einziger Umbruch: ab 1100px drei Spalten nebeneinander, darunter alles untereinander */
@media(max-width:1099px){
html,body{height:auto}body{display:block}
header{padding:10px 18px}.badge{display:none}
.connection-area{padding:10px 18px}.connection-area .connection{min-width:0;flex-basis:100%}
#remote-notice{margin:12px 18px}
main{display:block;height:auto;overflow:visible}
aside,.workspace,.results{height:auto;overflow:visible;border:0;padding:20px 18px}.workspace{--wx:18px;padding-bottom:0}
aside{border-bottom:1px solid var(--line)}.results{border-top:1px solid var(--line)}
.type-guide small{display:none}.toolbar{flex-wrap:wrap}.toolbar>span{max-width:100%}h1{font-size:24px}
}
/* Aktionsleiste klebt am unteren Rand der Modellier-Spalte (bzw. des Fensters, wenn gestapelt) */
.actions-bar{position:sticky;bottom:0;z-index:2;margin:14px calc(-1 * var(--wx)) 0;padding:8px var(--wx) 10px;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 12px -10px rgba(25,55,55,.35)}
.actions-bar .actions{padding:0;margin:0;border:0}
.actions-bar .error{margin:0 0 8px;padding:8px 10px}
#run,.actions .secondary{padding:9px 12px}
.actions-bar .actions{flex-wrap:nowrap}.actions-bar button{white-space:nowrap}
.actions-bar .error{max-height:160px;overflow:auto}