:root {
  --bg:#0e1116; --bg2:#161b22; --fg:#e6edf3; --muted:#aab4c0;
  --border:#30363d; --accent:#2ea44f; --accent-hover:#2c974b;
  --danger:#d73a49; --input-bg:#0b0f14; --input-fg:#e6edf3;
  --placeholder:#9aa4b0;
}
:root.light {
  --bg:#ffffff; --bg2:#f6f8fa; --fg:#1f2328; --muted:#57606a;
  --border:#d0d7de; --accent:#1f883d; --accent-hover:#1a7f37;
  --danger:#cf222e; --input-bg:#ffffff; --input-fg:#1f2328;
  --placeholder:#6b7480;
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color: var(--accent); }
.container { max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem; }

header.nav { display:flex; align-items:center; gap:1rem; padding: .75rem 1.25rem;
  border-bottom:1px solid var(--border); background: var(--bg2); }
header.nav .brand { font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }
header.nav .brand .badge { background:var(--accent); color:#fff; padding:.1rem .45rem; border-radius:.35rem; font-size:.75rem; }
header.nav nav { display:flex; gap:.25rem; flex-wrap:wrap; }
header.nav nav a { color: var(--fg); text-decoration:none; padding: .5rem .8rem; border-radius:.3rem; }
header.nav nav a:hover, header.nav nav a.active { background: rgba(127,127,127,.15); }
header.nav .spacer { flex:1; order:2; }
header.nav .btn { order:3; text-align: center; height: 42px; display: inline-flex; align-items: center;}
header.nav .icon-btn { order:4; }
header.nav .lang-btn { order:5; }
.icon-btn { background: var(--bg); border:1px solid var(--border); color:var(--fg);
  width:42px; height:42px; border-radius:.3rem; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn:hover { border-color: var(--accent); }
.icon-btn img { width:40px; height:40px; }
.lang-btn { background:var(--bg); border:1px solid var(--border); border-radius:.3rem; padding:.01rem .4rem; cursor:pointer;
  display:inline-flex; gap:.4rem; align-items:center; }
.lang-btn img { width:50px; height:40px; }
.btn { background: var(--accent); color:#fff; border:1px solid transparent;
  padding:.5rem 1.1rem .65rem; border-radius:.4rem; cursor:pointer;
  font-weight:600; font-size:.95rem; transition: background .15s, opacity .15s; }
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn.secondary { background: transparent; color: var(--fg); border:1px solid var(--border); }
.btn.secondary:hover { background: rgba(127,127,127,.1); }
.btn.danger { background: var(--danger); }

h1 { margin: 1.5rem 0 .25rem; }
.subtitle { color: var(--muted); margin-bottom: 1.25rem; }

.card { background: var(--bg2); border:1px solid var(--border); border-radius: .75rem; padding: 1.5rem; margin-bottom:1rem; transition: border-color .15s; }
.card:focus-within { border-color: rgba(46,164,79,.4); }

.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.form-grid .full, .detail-grid .full { grid-column: 1 / -1; }

label { display:block; font-size:.9rem; color: var(--fg); margin-bottom:.35rem; font-weight:600; }
label .req { color: var(--danger); }
input, textarea, select {
  width:100%; background: var(--input-bg); color: var(--input-fg);
  border:1px solid var(--border); border-radius:.3rem; padding:.65rem .75rem; font-size:1rem;
  font-family:inherit;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity:1; }
input:focus, textarea:focus, select:focus { outline:0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46,164,79,.25); }
textarea { min-height: 110px; resize: vertical; }

.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.hidden { display: none !important; }
.status-row { display:flex; gap:1rem; align-items:flex-end; margin-top:.75rem; }
.status-row__select { flex:1; }

.actions { display:flex; gap:.75rem; justify-content:flex-end; margin-top: 1rem; flex-wrap:wrap; }

.steps { display:flex; gap:.5rem; margin-bottom:1.25rem; font-size:.875rem; align-items:center; justify-content: center;}
.steps .step { color: var(--muted); padding:.35rem .85rem; border-radius:2rem; border:1px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.steps .step.active { color: var(--fg); font-weight:700; background: rgba(46,164,79,.12); border-color: rgba(46,164,79,.35); }

table { width:100%; border-collapse: collapse; }
th, td { padding:.6rem .5rem; border-bottom:1px solid var(--border); text-align:left; }
th { color: var(--muted); font-weight:600; font-size:.85rem; }

.status-badge { display:inline-block; padding:.2rem .55rem; border-radius:1rem; font-size:.8rem;
  background: rgba(127,127,127,.18); }

.msg-list { display:flex; flex-direction:column; gap:.6rem; }
.msg { padding:.7rem .9rem; border-radius:.6rem; max-width:80%; border:1px solid var(--border); }
.msg.customer { background: rgba(46,164,79,.10); align-self:flex-end; }
.msg.admin { background: rgba(127,127,127,.12); align-self:flex-start; }
.msg .meta { font-size:.75rem; color: var(--muted); margin-bottom:.25rem; }

.errors { color: var(--danger); margin: .5rem 0; min-height:1.2em; }
.success { color: var(--accent); margin: .5rem 0; }

.thumbs { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.thumbs a { display:block; }
.thumbs img { width:80px; height:80px; object-fit: cover; border-radius:.4rem; border:1px solid var(--border); }
html:not(.light) #theme-icon { filter: invert(1); }

@media (max-width: 720px) {
  .container { padding: .75rem; }

  header.nav { flex-wrap: wrap; gap: .5rem; padding: .6rem .75rem; }
  header.nav .brand { order: 0; width: 100%; text-align: center; justify-content: center; }
  header.nav nav { order: 1; width: 100%; justify-content: center; }
  header.nav .btn { order: 2; flex: 1; text-align: center; justify-content: center; }
  header.nav .icon-btn { order: 3; }
  header.nav .lang-btn { order: 4; }
  header.nav .spacer { display: none; }

  .icon-btn img { width: 32px; height: 32px; }
  .lang-btn { width: 54px; height: 42px; }
  .lang-btn img { width: 40px; height: 32px; }

  h1 { font-size: 1.4rem; margin-top: 1rem; }
  .subtitle { font-size: .9rem; margin-bottom: 1rem; }
  .card { padding: .9rem; border-radius: .5rem; }
  .actions { justify-content: stretch; }
  .actions .btn { flex: 1 1 auto; min-width: 0; }
  input, textarea, select { font-size: 16px; padding: .55rem .65rem; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: .5rem .4rem; font-size: .85rem; }
  .msg { max-width: 92%; }
  .thumbs img { width: 64px; height: 64px; }
  .steps { flex-wrap: wrap; gap: .35rem; font-size: .8rem; }
  .steps .step { padding:.25rem .65rem; }
  .detail-grid { grid-template-columns:1fr; }
}

@media (max-width: 400px) {
  header.nav .brand .badge { display: none; }
  h1 { font-size: 1.2rem; }
  .card { padding: .7rem; }
}

.detail-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:.6rem 1.25rem; margin-top:.5rem; }
.detail-row { display:flex; flex-direction:column; gap:.15rem; }
.detail-label { font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.detail-value { font-size:.95rem; word-break:break-word; }
.detail-value.pre { white-space:pre-wrap; background:var(--input-bg); border:1px solid var(--border); border-radius:.4rem; padding:.5rem .7rem; font-size:.875rem; }
.detail-section { border-top:1px solid var(--border); margin-top:1rem; padding-top:.75rem; }
.detail-section h4 { margin:0 0 .6rem; font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
/* Unread-Badge in der Admin-Auftragsliste */
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 9999px;
  background: var(--primary, #e53935);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

tr.has-unread {
  background: color-mix(in srgb, var(--primary, #e53935) 6%, transparent);
}

tr.has-unread td:first-child {
  border-left: 3px solid var(--primary, #e53935);
}