:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#23332b;background:#eef2ef}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column}button,input,textarea{font:inherit}button{border:1px solid #cad9ce;background:#fff;color:#26583c;padding:8px 11px;border-radius:7px;cursor:pointer;font-weight:600}button:hover{background:#e8f4ec}button:disabled{opacity:.5}.primary{background:#176b43;color:#fff;border-color:#176b43}.primary:hover{background:#115735}header{background:#fff;border-bottom:1px solid #d9e4dc;display:flex;justify-content:space-between;align-items:center;padding:10px 18px;gap:12px}.brand{display:flex;align-items:center;gap:10px}.brand img{width:43px;height:43px;object-fit:contain}.brand b{font-size:20px;color:#145e3b}.brand b span{font-size:13px;background:#e5f1e9;padding:3px 6px;border-radius:5px}.brand small{display:block;color:#6c8273}.header-actions,.actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.profile{display:flex;align-items:end;gap:10px;padding:10px 18px;background:#f9fbf9;border-bottom:1px solid #dbe6de;flex-wrap:wrap}.profile label{font-size:12px;color:#52705c;font-weight:600}.profile input{display:block;margin-top:3px;width:155px;border:1px solid #cbd9cf;border-radius:6px;padding:7px 9px;background:white}.exercise{margin-left:auto;min-width:170px}.exercise small{display:block;color:#67806d}.exercise strong{color:#195c3b}main{display:grid;grid-template-columns:255px minmax(0,1fr);gap:12px;padding:12px;flex:1;min-height:520px;height:calc(100vh - 178px)}aside,.workspace{background:white;border:1px solid #d6e2da;border-radius:9px;min-height:0;overflow:hidden}aside{display:flex;flex-direction:column}.panel-title,.editor-head,.results-head{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid #dce7df;gap:7px}.panel-title{font-weight:700;color:#195f3d}.panel-title button{padding:3px 10px}.tree{padding:10px;overflow:auto;flex:1;font-size:13px}.tree p{color:#768779}.table-name{display:block;width:100%;text-align:left;border:0;border-radius:4px;background:#edf5ef;margin:4px 0;padding:9px 8px}.column{padding:4px 8px 4px 17px;color:#5c6e60;overflow-wrap:anywhere}.column em{font-size:11px;color:#7a8e7f}.aside-action{margin:9px}.workspace{display:grid;grid-template-rows:auto minmax(170px,1fr) 35px auto minmax(145px,.85fr)}.editor-head strong,.results-head strong{color:#225d3e}.editor-wrap{position:relative;min-height:0;background:#fbfcfb;overflow:hidden}.editor-wrap pre,.editor-wrap textarea{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:14px 17px;border:0;font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto;overflow-wrap:normal}.editor-wrap pre{pointer-events:none;color:#26372d}.editor-wrap textarea{resize:none;background:transparent;color:transparent;caret-color:#122d1e;-webkit-text-fill-color:transparent;outline:0}.editor-wrap textarea::selection{background:#a5d6b4;color:transparent}.kw{color:#225fbd;font-weight:700}.str{color:#158448}.com{color:#84918a}.num{color:#9250aa}.check{border-top:1px solid #dce7df;padding:8px 13px;color:#56725d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.check.error{color:#bb3030}.results-head{border-top:1px solid #dce7df}.results-head #rowInfo{font-size:12px;color:#6b8170}.result-scroll{overflow:auto;min-height:0;padding:0 0 10px}table{border-collapse:collapse;min-width:100%;font-size:13px}th,td{padding:8px 11px;border-bottom:1px solid #e1e9e3;text-align:left;white-space:nowrap}th{position:sticky;top:0;background:#e9f2eb;color:#245c3d}tbody tr:nth-child(even){background:#f7faf8}#resultHint{color:#849388;font-size:13px;padding:12px}footer{display:flex;justify-content:space-between;gap:8px;padding:7px 14px;background:#e2ebe4;color:#57705d;font-size:11px}@media(max-width:800px){main{grid-template-columns:1fr;grid-template-rows:180px minmax(480px,1fr);height:auto}aside{min-height:180px}.tree{display:flex;gap:8px;flex-wrap:wrap}.table-name{width:auto}.column{display:none}.profile .exercise{margin-left:0}.workspace{min-height:590px}.editor-head,.results-head{flex-wrap:wrap}footer span:last-child{display:none}}@media print{header,.profile,aside,.editor-head,.results-head,.result-scroll,footer,.check{display:none!important}body{background:#fff}main,.workspace,.editor-wrap{display:block!important;border:0!important;height:auto!important;padding:0!important}.editor-wrap pre{position:static;white-space:pre-wrap;overflow:visible;font-size:11pt}.editor-wrap textarea{display:none}body:before{content:'IFL SQL-Trainer · SQL-Statements';display:block;font-weight:700;font-size:17pt;margin:0 0 15px}}

/* Lite 0.3: platzsparende Kopfzeile und Profildialog */
header{padding:6px 12px;min-height:52px}.brand img{width:34px;height:34px}.brand b{font-size:17px}.brand small{font-size:10px}.header-actions{gap:5px}.header-actions button,.actions button,.panel-title button,.aside-action{font-size:12px;padding:5px 8px;border-radius:5px}.profile-button{max-width:245px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.exercise-bar{padding:5px 12px;background:#f9fbf9;border-bottom:1px solid #dbe6de;font-size:12px;color:#53715c}.exercise-bar strong{color:#195c3b}main{height:calc(100vh - 115px);min-height:440px;padding:8px;gap:8px}.panel-title,.editor-head,.results-head{padding:7px 10px}.workspace{grid-template-rows:auto minmax(170px,1fr) 35px auto minmax(145px,.85fr)}dialog{border:1px solid #c7d9cb;border-radius:12px;box-shadow:0 18px 65px #0003;max-width:min(420px,calc(100vw - 30px));width:100%;padding:0;color:#23332b}dialog::backdrop{background:#14291c88}.profile-form{padding:22px;display:grid;gap:12px}.profile-form h2{margin:0;color:#195c3b;font-size:20px}.profile-form p{margin:0 0 4px;font-size:13px;color:#667b6b}.profile-form label{font-size:13px;font-weight:600;display:grid;gap:4px}.profile-form input{border:1px solid #bdcfc1;border-radius:6px;padding:9px;width:100%;background:white;color:#23332b}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.dialog-actions button{font-size:13px;padding:7px 12px}@media(max-width:800px){main{height:auto}.header-actions{justify-content:flex-end}.profile-button{max-width:175px}}@media print{.exercise-bar,dialog{display:none!important}}

/* Lite 0.4: nur eine Kopfzeile; Dateiinformationen im Modal */
main{height:calc(100dvh - 54px)}#infoBtn{min-width:30px;font-size:17px;padding:3px 7px}.info-content{padding:22px}.info-content h2{margin:0 0 16px;color:#195c3b;font-size:20px}.info-content dl{display:grid;grid-template-columns:100px 1fr;gap:10px 12px;margin:0 0 18px;font-size:13px}.info-content dt{font-weight:700;color:#607466}.info-content dd{margin:0;overflow-wrap:anywhere}@media(max-width:800px){main{height:auto}}

/* Lite 0.5: Änderungen nach DML visuell hervorheben */
#results tbody tr.inserted-row td{background:#d9f4e2;font-weight:700}#results tbody tr.changed-row td{background:#f2f8e9}#results tbody tr td.changed-cell{background:#c5edce;font-weight:700;box-shadow:inset 0 0 0 1px #a3d9b1}

/* Lite 0.6: feste Viewport-App, drei unabhängig scrollende Bereiche */
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{min-height:0;display:flex;flex-direction:column}
header{flex:0 0 auto;min-height:0}
main#appLayout{flex:1 1 auto;height:auto!important;min-height:0!important;max-height:none;display:grid;grid-template-columns:minmax(135px,var(--tree-width,255px)) 7px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;padding:8px;overflow:hidden}
main#appLayout aside,main#appLayout .workspace{min-height:0;min-width:0;overflow:hidden}
main#appLayout .workspace{display:grid;grid-template-rows:auto minmax(0,var(--editor-share,1fr)) 35px 7px auto minmax(0,var(--result-share,1fr));}
.tree,.result-scroll,.editor-wrap,.editor-wrap textarea,.editor-wrap pre{min-height:0;min-width:0;overscroll-behavior:contain}
.tree,.result-scroll{overflow:auto;scrollbar-gutter:stable}
.editor-wrap textarea,.editor-wrap pre{overflow:auto!important}
.splitter{background:#d5e2d8;touch-action:none;user-select:none;position:relative;z-index:3}
.splitter:hover,.splitter.dragging{background:#85b99a}
.splitter-horizontal{cursor:col-resize;margin:0 1px;border-radius:5px}
.splitter-vertical{cursor:row-resize;margin:0 8px;border-radius:5px}
.splitter-horizontal:after{content:'⋮';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#477358;font-size:18px}
.splitter-vertical:after{content:'⋯';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#477358;font-size:18px}
.editor-wrap textarea::selection{background:#238b58!important;color:white!important;-webkit-text-fill-color:white!important}
.editor-wrap textarea::-moz-selection{background:#238b58!important;color:white!important}
.result-scroll{position:relative}
.delete-notice{position:sticky;top:8px;z-index:5;margin:8px 12px -2px;padding:15px 42px 13px 16px;border:1px solid #d6ad73;border-left:5px solid #bf7a1f;background:#fff8e8;box-shadow:0 6px 20px #0002;border-radius:8px;max-width:550px;color:#62420f}
.delete-notice[hidden]{display:none!important}.delete-notice strong{font-size:14px}.delete-notice p{font-size:13px;margin:6px 0 0}.delete-notice button{position:absolute;right:9px;top:6px;border:0;background:transparent;color:#62420f;font-size:22px;padding:2px 7px}
@media(max-width:800px){main#appLayout{grid-template-columns:minmax(105px,var(--tree-width,190px)) 7px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.tree{display:block}.table-name{width:100%}.column{display:block}.workspace{min-height:0!important}.header-actions{flex-wrap:nowrap}.brand small{display:none}}
@media print{html,body{height:auto!important;overflow:visible!important}main#appLayout{display:block!important;overflow:visible!important;height:auto!important}.splitter{display:none!important}.delete-notice{display:none!important}}

/* Druckkopf mit den Angaben der Schuelerin/des Schuelers */
#printIdentity{display:none}
@media print{body:before{display:none!important}#printIdentity{display:block!important;margin:0 0 18px;break-after:avoid}#printIdentity h1{font-size:17pt;margin:0 0 8px}#printIdentity p{font-size:10pt;margin:3px 0}main#appLayout{margin:0!important} .editor-wrap pre{color:#222!important}}

/* PWA 1.0.1: Cache-Reset im Info-Dialog */
.maintenance{border-top:1px solid #dce7de;margin-top:14px;padding-top:13px}.maintenance h3{font-size:14px;margin:0 0 5px;color:#195c3b}.maintenance p,#pwaResetDialog p{font-size:12px;color:#5c7062;line-height:1.4}.maintenance button{font-size:12px;padding:7px 10px}.reset-option{display:flex;gap:9px;align-items:flex-start;margin:12px 0;cursor:pointer;font-size:13px}.reset-option input{margin-top:3px;flex-shrink:0}.reset-option span{display:grid;gap:3px}.reset-option small{color:#5c7062;line-height:1.4}#pwaResetMessage{min-height:1em}

/* PWA 1.0.3: Installationshilfe */
.install-status{font-size:13px;color:#526f5b;line-height:1.5}.install-steps{font-size:13px;line-height:1.6;color:#243b2b}.install-steps ol{padding-left:22px}.install-steps li{margin:7px 0}#installDialog .dialog-actions{flex-wrap:wrap}

/* Ruecksetzdialog */
.reset-fieldset{border:1px solid #d9e7df;border-radius:7px;margin:12px 0;padding:10px 12px}.reset-fieldset legend{font-weight:700;color:#195c3b;padding:0 5px}.reset-choice{display:flex;align-items:flex-start;gap:8px;margin:10px 0;font-size:13px;line-height:1.4;cursor:pointer}.reset-choice input{flex-shrink:0;margin-top:2px}.reset-choice[hidden]{display:none!important}

/* SQL-Autovervollständigung */
.sql-suggestions{position:absolute;z-index:30;width:max-content;min-width:185px;max-width:min(390px,90%);max-height:220px;overflow-y:auto;background:#fff;border:1px solid #b6cfc0;border-radius:7px;box-shadow:0 7px 22px #173b292b;font:13px/1.5 ui-monospace,Consolas,monospace;padding:4px;}
.sql-suggestions[hidden]{display:none!important}.sql-suggestion{display:flex;justify-content:space-between;gap:20px;padding:5px 9px;border-radius:4px;cursor:pointer;white-space:nowrap}.sql-suggestion small{color:#718579;font-size:11px}.sql-suggestion.selected,.sql-suggestion:hover{background:#dceee2;color:#145a36}.sql-suggestion.selected small{color:#366f4e}
@media print{.sql-suggestions{display:none!important}}

/* v2.0.2: ruhige, einheitliche Symbolleisten */
.header-actions,.editor-head .actions{gap:5px;flex-wrap:nowrap}
.header-actions button,.editor-head .actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;white-space:nowrap}
.toolbar-icon{width:17px;height:17px;display:block;flex-shrink:0}
.primary .toolbar-icon{filter:brightness(0) invert(1)}
.toolbar-divider{height:22px;width:1px;flex:0 0 1px;background:#d6e3da;margin:0 5px}
#infoBtn,#newBtn,#undoBtn,#printBtn,#txtBtn,#openBtn{min-width:33px}
#infoBtn{font-size:12px}
.brand b span{font-size:12px}
#infoDialog{max-width:min(560px,calc(100vw - 30px));max-height:90dvh;overflow:auto}
#infoDialog .about-details{grid-template-columns:88px minmax(0,1fr);gap:7px 12px;margin:10px 0 0}
#infoDialog a{color:#176b43;overflow-wrap:anywhere}
@media(max-width:650px){.header-actions,.editor-head .actions{flex-wrap:wrap}.toolbar-divider{margin:0 2px}.brand b{font-size:14px}.brand img{width:28px;height:28px}}
@media print{.toolbar-divider{display:none!important}}

/* Respect hidden state even on flex/grid styled sections. */
#installSection[hidden],#maintenanceSection[hidden]{display:none!important}

/* v2.0.5: gleiche rechte Kante und gleiche quadratische Icon-Buttons */
.header-actions,.editor-head .actions{justify-content:flex-end;flex-wrap:nowrap;gap:5px}
.header-actions button:not(#profileBtn),.editor-head .actions button{box-sizing:border-box;width:34px;min-width:34px;max-width:34px;height:34px;min-height:34px;padding:0;flex:0 0 34px;display:inline-flex;align-items:center;justify-content:center}
#saveBtn,#runBtn{width:34px!important;min-width:34px!important;max-width:34px!important;padding:0!important}
.header-actions .toolbar-divider,.editor-head .actions .toolbar-divider{margin:0 4px}
#refreshBtn{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;padding:3px}
#refreshBtn .toolbar-icon{width:16px;height:16px}
@media(max-width:650px){.header-actions,.editor-head .actions{flex-wrap:nowrap;gap:4px}.header-actions .toolbar-divider,.editor-head .actions .toolbar-divider{margin:0 2px}}

/* v2.0.6: neutral save button, stable toolbar alignment and execution-error marking */
#saveBtn{background:#fff!important;color:#26583c!important;border-color:#cad9ce!important}
#saveBtn:hover{background:#e8f4ec!important}
#saveBtn .toolbar-icon{filter:none!important}
.header-actions{justify-content:flex-end}
.header-actions #profileBtn{margin-left:0}
.sql-error-statement{color:#c42026!important;text-decoration:underline wavy #d52228;text-decoration-thickness:1px;text-underline-offset:3px}
.sql-error-statement .kw,.sql-error-statement .str,.sql-error-statement .num,.sql-error-statement .com{color:#c42026!important}
@media print{
 @page{background:white}
 html,body,main#appLayout,.workspace,.editor-wrap,.editor-wrap pre,#printIdentity,#printIdentity *{background:#fff!important;background-image:none!important;box-shadow:none!important;color:#000!important}
 /* Druck: Syntaxfarben aus dem Editor beibehalten, nur den Hintergrund entfernen. */
 .editor-wrap pre{color:#26372d!important;text-decoration:none!important}
 .editor-wrap pre .kw{color:#225fbd!important;font-weight:700!important}
 .editor-wrap pre .str{color:#158448!important}
 .editor-wrap pre .num{color:#9250aa!important}
 .editor-wrap pre .com{color:#84918a!important}
 .editor-wrap pre .sql-error-statement,.editor-wrap pre .sql-error-statement *{color:#c42026!important;text-decoration:none!important}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* v2.0.7: App-Symbol im Infofenster */
.info-heading{display:flex;align-items:center;gap:12px}
.info-app-icon{width:44px;height:44px;object-fit:contain;flex:none}

/* v2.0.8: Schluesselspalten im Datenbankbaum */
.column-field.column-primary,.column-field.column-foreign{font-weight:700}
.column-key-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:5px;vertical-align:middle}
.column-key-icon img{display:block;width:14px;height:14px}
.column:has(.column-primary) .column-key-icon img{filter:brightness(0) saturate(100%) invert(64%) sepia(80%) saturate(577%) hue-rotate(356deg) brightness(96%) contrast(91%)}
.column:has(.column-foreign) .column-key-icon img{filter:brightness(0) saturate(100%) invert(41%) sepia(82%) saturate(1425%) hue-rotate(183deg) brightness(97%) contrast(94%)}
.column em{font-weight:400}

/* v2.1.0: kompakter Druckkopf, angelehnt an die native Ansicht, ohne farbige Flaechen */
@media print{
 #printIdentity{margin:0 0 15px!important;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;break-inside:avoid;color:#222!important}
 #printIdentity .print-title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:2px solid #176b43;padding-bottom:7px;margin-bottom:11px}
 #printIdentity h1{font-size:17pt!important;line-height:1.2;margin:0!important;color:#176b43!important;font-weight:750}
 #printIdentity h1 span{font-size:9pt;font-weight:600;color:#52685a!important;vertical-align:baseline}
 #printIdentity .print-subtitle{font-size:9pt;color:#56645b!important;margin-top:2px}
 #printIdentity .print-date{font-size:9pt;white-space:nowrap;padding-top:5px;color:#333!important;text-align:right}
 #printIdentity .print-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;font-size:9.5pt;line-height:1.5}
 #printIdentity .print-details>div>div{display:flex;gap:8px;align-items:baseline;min-width:0}
 #printIdentity .print-details strong{flex:0 0 78px;font-weight:650;color:#222!important}
 #printIdentity .print-details span{overflow-wrap:anywhere}
 #printIdentity #printSystem[hidden]{display:none!important}
 #printIdentity .print-details:has(#printSystem[hidden]){grid-template-columns:1fr}
}

/* PDF-Vorschau */
.pdf-preview-dialog{width:min(1100px,95vw);height:min(94vh,1000px);max-width:none;max-height:none;padding:0;border:1px solid #b8c7bf;border-radius:8px;overflow:hidden;background:white;color:#182b22}.pdf-preview-dialog::backdrop{background:rgba(0,0,0,.55)}.pdf-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#f4f8f5}.pdf-preview-actions{display:flex;gap:8px;flex-wrap:wrap}.pdf-preview-actions button{padding:7px 12px;cursor:pointer}.pdf-preview-dialog iframe{display:block;width:100%;height:calc(100% - 64px);border:0;background:white}

#printOtherNamesRow[hidden]{display:none!important}