/* bildauswertung — Stil aus dem Werk „Wuchs“ */
:root{--bg:#f5f6f3;--p:#fff;--ink:#1c201b;--mu:#5d6858;--li:#d5dacf;--ac:#3f5f7a;--wa:#8a3b1f}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.5 "DejaVu Sans",system-ui,Arial,sans-serif}
header{background:var(--ac);color:#fff;padding:13px 18px}
header h1{margin:0;font-size:18px}header .s{font-size:12.5px;opacity:.9}
main{display:grid;grid-template-columns:330px 1fr;gap:14px;padding:14px;max-width:1400px;margin:0 auto}
@media(max-width:900px){main{grid-template-columns:1fr}}
section{background:var(--p);border:1px solid var(--li);border-radius:8px;padding:13px;margin-bottom:12px}
h2{font-size:15px;margin:0 0 8px;border-bottom:1px solid var(--li);padding-bottom:5px}
label{display:block;font-size:12.5px;color:var(--mu);margin:7px 0 2px}
.en{font-size:11px;color:var(--mu)}
input,select,button{font:inherit}
input[type=number],select{width:100%;padding:5px 7px;border:1px solid var(--li);border-radius:5px}
input[type=range]{width:100%}
button{padding:6px 11px;border:1px solid var(--li);background:#fff;border-radius:5px;cursor:pointer;margin:3px 3px 0 0}
button.p{background:var(--ac);color:#fff;border-color:var(--ac)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{border:1px solid var(--li);padding:4px 6px;text-align:right}
th{background:#eef1ec}td:first-child,th:first-child{text-align:left}
#view{width:100%;max-width:100%;border:1px solid var(--li);background:#222;image-rendering:pixelated}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.note{font-size:12.5px;background:#f3f6f8;border-left:3px solid var(--ac);padding:7px 9px;margin-top:8px}
.warn{font-size:12.5px;background:#fbf1ed;border-left:3px solid var(--wa);padding:7px 9px;margin-top:8px}
#list button{display:block;width:100%;text-align:left;margin:2px 0;font-size:12.5px}
#list button.on{border-color:var(--ac);background:#eef3f7}
.leg span{display:inline-block;width:11px;height:11px;margin:0 4px -1px 10px;border:1px solid #999}
@media(max-width:760px){
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  button{white-space:normal}
  main{padding:10px}
  /* Rasterfelder duerfen schmaler werden als ihr Inhalt — ohne min-width:0
     schiebt ein breiter Inhalt die ganze Seite quer */
  main>*,main>*>*{min-width:0}
  /* Tabellen scrollen in ihrem Abschnitt, statt die Seite breit zu machen */
  section{overflow-x:auto}
  table{min-width:540px}
  img,canvas,svg{max-width:100%}
  header h1{font-size:16px}
}