/* Zero Konverter — was nur diesen Dienst betrifft.
   Die gemeinsame Grundlage (Farben, Anmeldemaske, Schaltflächen, Karten)
   steht in zero-ui.css und wird vorher geladen. Quelle dafür:
   /var/www/shared/css/zero-ui.css — dort ändern, nicht hier. */

/* --- Gerüst --------------------------------------------------------------- */

.shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:16px 26px;padding-top:calc(16px + var(--safe-t));
      border-bottom:1px solid var(--line);background:#0b0f17d9;position:sticky;top:0;z-index:20}
.kopf .brand{margin:0}
.kopfknoepfe{display:flex;gap:8px;align-items:center}
.inhalt{width:min(1080px,100%);margin:0 auto;padding:26px;
        padding-bottom:calc(26px + var(--safe-b));display:grid;gap:20px;align-content:start}
.fuss{padding:18px 26px;padding-bottom:calc(18px + var(--safe-b));border-top:1px solid var(--line)}

/* --- Reiter --------------------------------------------------------------- */

.reiter{display:flex;gap:6px;flex-wrap:wrap}
.reiter button{padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:700;
               color:var(--muted);background:#0e1620;border:1px solid var(--line)}
.reiter button[aria-pressed=true]{color:#06110e;background:var(--accent);border-color:var(--accent)}

/* --- Ablage --------------------------------------------------------------- */

.ablage{display:grid;place-items:center;gap:10px;padding:38px 22px;text-align:center;
        border:2px dashed #26364d;border-radius:16px;background:#0c1420;cursor:pointer}
.ablage:hover,.ablage.bereit{border-color:var(--accent);background:#101d19}
.ablage strong{font-size:16px}
.ablage input[type=file]{display:none}

/* --- Auftragsliste -------------------------------------------------------- */

.stapel{display:grid;gap:10px}
.posten{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
        padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.posten .art{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:11px;
             font-size:11px;font-weight:800;letter-spacing:.04em;
             color:var(--accent);background:#15241f;border:1px solid #26473c;text-transform:uppercase}
.posten .wer{min-width:0}
.posten .wer b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.posten .wer small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.posten .tun{display:flex;gap:8px;align-items:center;flex:none}
.posten select{width:auto;min-width:118px;padding:9px 10px;font-size:13px}
.posten.fertig{border-color:#2c5a4a;background:#101d19}
.posten.fehler{border-color:#80303f}
.posten .fortschritt{height:3px;border-radius:2px;background:#1d2634;overflow:hidden;margin-top:8px}
.posten .fortschritt i{display:block;height:100%;width:35%;background:var(--accent);
                       animation:schieben 1.1s infinite ease-in-out}
@keyframes schieben{0%{margin-left:-35%}100%{margin-left:100%}}

/* Wo gerechnet wird — die wichtigste Angabe auf dieser Seite. */
.ort{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
     font-size:11px;font-weight:800;letter-spacing:.02em}
.ort.browser{color:#8ff0cd;background:#12261f;border:1px solid #2c5a4a}
.ort.server{color:#ffd8a8;background:#241a0f;border:1px solid #4a3512}

/* --- Textwerkzeug --------------------------------------------------------- */

.textbereich{display:grid;gap:12px}
.textbereich textarea{min-height:150px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.textzeile{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.textzeile select{width:auto;min-width:150px}

/* --- Formatliste ---------------------------------------------------------- */

.familie{margin-top:16px}
.familie h3{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.formatgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.formatkarte{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0e1620}
.formatkarte b{display:block;font-size:13px}
.formatkarte small{display:block;margin-top:3px;color:var(--muted);font-size:11.5px;line-height:1.5}

/* --- Konto ---------------------------------------------------------------- */

.listenzeile{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #202938}
.listenzeile:first-of-type{border-top:0}
.listenzeile .grow{flex:1;min-width:0}
.listenzeile b{display:block;font-size:13.5px}
.listenzeile small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px}

/* --- Auf dem Telefon ------------------------------------------------------ */

@media(max-width:760px){
  .kopf{padding:12px 14px;padding-top:calc(12px + var(--safe-t))}
  .kopf .brand{font-size:15px}
  .inhalt{padding:14px;gap:14px}
  .ablage{padding:26px 14px}
  .posten{grid-template-columns:auto 1fr;gap:10px}
  .posten .tun{grid-column:1 / -1;justify-content:space-between}
  .posten select{flex:1}
  .fuss{padding:14px}
}
@media(pointer:coarse){
  .kopf{background:#0b0f17}
  .reiter button{padding:11px 16px}
}