/* Alles haengt an diesen sieben Werten - Kaesten, Knoepfe, Menues, Regler
     ziehen von selbst mit. Der Grund ist schwarz, die Kaesten sind ebenfalls
     schwarz und nur durch eine helle Linie da; getrennt wird durch Kontur,
     nicht durch Flaeche. */
  :root{
    --ground:#000000;        /* Seitengrund */
    --paper:#000000;         /* Inneres der Kaesten - bewusst derselbe Ton */
    --ink:#ececec;           /* Schrift */
    --line:#5a5a5a;          /* die Linien, die alles zusammenhalten */
    --muted:#8b8b8b;         /* Nebensaechliches */
    --mark:#ff2f92;          /* Fokus, auf Schwarz heller als zuvor */
    --wach:#161616;          /* Hauch von Aufhellung beim Ueberfahren */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--ground);color:var(--ink);
       font:15px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
  .shell{max-width:1500px;margin:0 auto;padding:22px 22px 60px;display:flex;flex-direction:column;gap:18px}

  .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;
        border-bottom:1px solid var(--line);padding-bottom:12px}
  .head h1{font-size:19px;font-weight:600;letter-spacing:-.01em}
  .head p{color:var(--muted);font-size:14px}
  .head .note{margin-left:auto;color:var(--muted);font-size:13px}

  .console{background:var(--paper);border:1px solid var(--line);padding:16px;
           display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px}
  textarea{
    width:100%;min-height:104px;resize:vertical;padding:12px 13px;
    font:20px/1.35 "Helvetica Neue",Helvetica,Arial,sans-serif;
    border:1px solid var(--line);background:var(--paper);color:var(--ink);
  }
  textarea#foot{min-height:54px;font-size:14px;margin-top:8px;color:var(--muted)}
  textarea#foot:focus{color:var(--ink)}
  textarea:focus{outline:2px solid var(--mark);outline-offset:-1px}
  .knobs{display:flex;flex-direction:column;gap:11px}
  .knob{display:grid;grid-template-columns:118px 1fr 44px;align-items:center;gap:10px;
        font-size:13px;color:var(--muted)}
  .knob input[type=range]{width:100%;accent-color:var(--ink)}
  .slider input[type=range]{accent-color:var(--ink)}
  .knob b{font-weight:400;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
  .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  button.t,select{
    font:inherit;font-size:13px;padding:6px 12px;cursor:pointer;
    background:var(--paper);border:1px solid var(--line);color:var(--ink);
  }
  /* Ohne diese Zeile setzt der Browser die aufgeklappte Liste, die Regler und
     die Haekchen weiterhin hell - die kommen vom System, nicht von uns. */
  :root{color-scheme:dark}
  button.t:hover{background:var(--wach);border-color:var(--ink)}
  button.t:focus-visible,select:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
  .drop{position:relative;display:inline-block}
  .dropmenu{position:absolute;z-index:40;top:calc(100% + 5px);left:0;min-width:236px;
    background:var(--paper);border:1px solid var(--line);
    box-shadow:0 14px 40px rgba(0,0,0,.7);padding:5px;
    display:flex;flex-direction:column;gap:1px}
  .dropmenu[hidden]{display:none}
  .dropmenu button{appearance:none;background:none;border:0;text-align:left;
    font:inherit;font-size:13px;padding:8px 10px;cursor:pointer;color:var(--ink)}
  .dropmenu button:hover{background:var(--wach)}
  .dropsep{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);padding:8px 10px 3px}
  .dropsep:first-child{padding-top:5px}

  .swpreview{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:30px;border:1px solid var(--line);font-size:14px;font-weight:600}
  label.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}
  label.chk input{accent-color:var(--ink)}

.motifbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
             border-top:1px solid var(--line);margin-top:13px;padding-top:12px}
  .fotobar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:100%;
    border-top:1px solid var(--line);margin-top:11px;padding-top:11px}
  .fotobar input[type=file]{font:inherit;font-size:12.5px;color:var(--muted);max-width:230px}
  .fotobar input[type=file]::file-selector-button{font:inherit;font-size:13px;
    padding:5px 11px;margin-right:9px;cursor:pointer;
    background:var(--paper);border:1px solid var(--line);color:var(--ink)}
  .fotobar input[type=file]::file-selector-button:hover{background:var(--wach);border-color:var(--ink)}
  .thumbs{display:flex;flex-direction:column;gap:5px;width:100%}
  .thumbrow{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
  .thumbrow .wer{font-size:12px;color:var(--muted);width:96px;flex:none}
  .th{width:42px;height:42px;padding:2px;background:var(--paper);
      border:1px solid var(--line);cursor:pointer}
  .th svg{display:block;width:100%;height:100%}
  .th[aria-pressed="true"]{border-color:var(--ink);outline:1px solid var(--ink)}
  .th:focus-visible{outline:2px solid var(--mark);outline-offset:1px}
  input[type=number]{font:inherit;width:56px;padding:5px 7px;
      border:1px solid var(--line);background:var(--paper);color:var(--ink)}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
  .card{background:var(--paper);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px}
  .card .cap{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--muted)}
  .card .cap b{font-size:13px;font-weight:600;color:var(--ink)}
  .card .frame{background:var(--paper);border:1px solid var(--line)}
  .card svg{display:block;width:100%;height:auto}
  .card .acts{display:flex;gap:7px}
  .card .acts button{flex:1}

  .legend{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:12px}
  .legend.feinsatz{font-size:12px;border-top:0;padding-top:0}
  .legend a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .legend a:hover{border-bottom-color:var(--ink)}

  @media (max-width:820px){ .console{grid-template-columns:1fr} }