:root{
  --bg:#F3F4EF;
  --surface:#FFFFFF;
  --surface-2:#E8EAE2;
  --ink:#1D2420;
  --ink-muted:#5B655C;
  --border:#D7DBD0;
  --accent:#255B55;
  --accent-ink:#FFFFFF;
  --accent-soft:#DCEAE7;
  --open:#3B6EA5;
  --open-soft:#E1EBF4;
  --clarify:#B9701F;
  --clarify-soft:#F5E7D4;
  --ki:#6B4FA0;
  --ki-soft:#EBE4F5;
  --done:#3F7D4C;
  --done-soft:#E1EFE1;
  --danger:#AA3B36;
  --danger-soft:#F5E0DE;
  --shadow: 0 1px 2px rgba(29,36,32,0.06), 0 6px 16px -8px rgba(29,36,32,0.18);
  --radius: 10px;
  --focus: #255B55;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141810;
    --surface:#1D231C;
    --surface-2:#252C22;
    --ink:#ECEFE7;
    --ink-muted:#9CA79A;
    --border:#333B30;
    --accent:#68B3A6;
    --accent-ink:#0E1512;
    --accent-soft:#203330;
    --open:#7EA9DD;
    --open-soft:#20293A;
    --clarify:#E3A25A;
    --clarify-soft:#382C1C;
    --ki:#B79AE0;
    --ki-soft:#2C2438;
    --done:#79C287;
    --done-soft:#1F3020;
    --danger:#E28781;
    --danger-soft:#3A211F;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px -10px rgba(0,0,0,0.55);
    --focus:#8FD0C4;
  }
}

*{box-sizing:border-box;}
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ text-wrap:balance; font-family:"Libre Franklin", ui-sans-serif, sans-serif; margin:0; }
.mono{ font-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric:tabular-nums; }
button{ font-family:inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
img{ max-width:100%; }
::selection{ background:var(--accent-soft); }

/* ---------- Gate ---------- */
#gate{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.gate-card{
  width:100%; max-width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:32px 28px 28px;
  text-align:center;
}
.gate-mark{
  width:44px; height:44px; margin:0 auto 16px;
  border-radius:9px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
.gate-mark svg{ width:22px; height:22px; stroke:var(--accent); }
.gate-card h1{ font-size:1.25rem; font-weight:700; }
.gate-card p{ margin:6px 0 20px; color:var(--ink-muted); font-size:0.9rem; }
.gate-form{ display:flex; flex-direction:column; gap:10px; }
.gate-input-row{ position:relative; }
#gate-password{
  width:100%;
  padding:11px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  font-size:1rem;
  letter-spacing:0.02em;
}
.gate-submit{
  padding:11px 14px;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  transition:opacity .15s ease;
}
.gate-submit:hover{ opacity:0.9; }
.gate-error{
  color:var(--danger);
  font-size:0.82rem;
  min-height:1.2em;
  margin-top:2px;
}
.gate-divider{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 14px;
  color:var(--ink-muted);
  font-size:0.76rem;
}
.gate-divider::before, .gate-divider::after{
  content:""; flex:1; height:1px; background:var(--border);
}
.gate-report-link{ width:100%; justify-content:center; }

/* ---------- App shell ---------- */
#app{ display:flex; flex-direction:column; min-height:100vh; }
header.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:14px 20px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
header.top .brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
header.top .brand-mark{
  width:32px; height:32px; border-radius:8px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
header.top .brand-mark svg{ width:17px; height:17px; stroke:var(--accent); }
header.top h1{ font-size:1.05rem; font-weight:700; }
header.top .brand-sub{ font-size:0.76rem; color:var(--ink-muted); }

.column-nav{
  display:none;
  flex:1 1 100%;
  gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.column-nav::-webkit-scrollbar{ display:none; }
.column-nav button{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  font-size:0.78rem;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.column-nav button::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--dot);
  flex:none;
}
@media (max-width:640px){
  .column-nav{ display:flex; }
  .column{ scroll-margin-top:112px; }
}

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  font-size:0.85rem;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  transition:background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--surface-2); }
.btn svg{ width:15px; height:15px; stroke:currentColor; flex:none; }
.btn-primary{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  font-weight:600;
}
.btn-primary:hover{ opacity:0.92; background:var(--accent); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-muted); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-sm{ padding:6px 10px; font-size:0.78rem; border-radius:6px; }

main{ flex:1; padding:20px; max-width:1180px; margin:0 auto; width:100%; }

/* ---------- Composer ---------- */
.composer{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:22px;
}
.composer textarea{
  width:100%;
  min-height:52px;
  resize:vertical;
  border:none;
  background:transparent;
  color:var(--ink);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:0.92rem;
  line-height:1.5;
  padding:2px 2px 8px;
}
.composer textarea:focus{ outline:none; }
.composer-footer{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:10px; border-top:1px dashed var(--border);
}
.photo-input-btn{ position:relative; overflow:hidden; }
.photo-input-btn input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.composer-photo-previews{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.photo-chip{
  position:relative;
  width:40px; height:40px;
  border-radius:7px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-2);
}
.photo-chip img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.photo-chip-status{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; color:var(--ink-muted);
  background:var(--surface-2);
}
.photo-chip-remove{
  position:absolute; top:-1px; right:-1px;
  width:16px; height:16px;
  border-radius:50%;
  border:none;
  background:var(--danger);
  color:#fff;
  font-size:0.72rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.composer-submit{ margin-left:auto; }

/* ---------- Board ---------- */
.board{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  align-items:start;
}
@media (max-width:1100px){
  .board{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .board{ grid-template-columns:1fr; }
}
.column{
  background:var(--surface-2);
  border-radius:12px;
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
  min-height:120px;
}
.column-head{
  display:flex; align-items:center; gap:8px;
  padding:2px 4px 4px;
}
.column-stripe{ width:9px; height:9px; border-radius:50%; flex:none; }
.column-head h2{ font-size:0.86rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.column-count{
  margin-left:auto;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem;
  color:var(--ink-muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1px 8px;
}
.column-list{ display:flex; flex-direction:column; gap:10px; }
.column-empty{
  color:var(--ink-muted);
  font-size:0.82rem;
  padding:14px 6px;
  text-align:center;
  border:1px dashed var(--border);
  border-radius:8px;
}

/* ---------- Card ---------- */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--stripe, var(--border));
  border-radius:9px;
  box-shadow:var(--shadow);
  padding:12px 12px 10px;
}
.card-time{
  font-size:0.72rem;
  color:var(--ink-muted);
  margin-bottom:6px;
  display:block;
}
.card-text{
  white-space:pre-wrap;
  font-size:0.92rem;
  line-height:1.48;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  margin-bottom:8px;
  word-break:break-word;
}
.card-photos{
  display:grid;
  gap:6px;
  margin-bottom:8px;
}
.card-photos-1{ grid-template-columns:1fr; }
.card-photos-2{ grid-template-columns:1fr 1fr; }
.card-photos-3{ grid-template-columns:1fr 1fr 1fr; }
.card-photo{
  display:block;
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--border);
  cursor:zoom-in;
}
.card-photos-1 .card-photo{ height:150px; }
.card-comment{
  background:var(--done-soft);
  border-radius:6px;
  padding:8px 10px;
  font-size:0.82rem;
  color:var(--ink);
  margin-bottom:8px;
}
.card-comment b{ display:block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--done); margin-bottom:3px; }
.card-comment-clarify{ background:var(--clarify-soft); }
.card-comment-clarify b{ color:var(--clarify); }
.card-comment-ki{ background:var(--ki-soft); }
.card-comment-ki b{ color:var(--ki); }
.card-actions{ display:flex; flex-wrap:wrap; gap:6px; }

/* inline done-comment box */
.done-box{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--border);
  display:flex; flex-direction:column; gap:6px;
}
.done-box textarea{
  width:100%; min-height:44px; resize:vertical;
  border:1px solid var(--border); border-radius:6px;
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Mono", monospace; font-size:0.82rem;
  padding:6px 8px;
}
.done-box textarea.textarea-lg{ min-height:120px; }
.done-box-actions{ display:flex; gap:6px; justify-content:flex-end; }

.confirm-row{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--border);
  display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--ink-muted);
}
.confirm-row .btn{ margin-left:auto; }

/* ---------- Lightbox ---------- */
#lightbox{
  display:none;
  position:fixed; inset:0; z-index:50;
  background:rgba(10,12,10,0.82);
  align-items:center; justify-content:center;
  padding:28px;
}
#lightbox img{
  max-width:100%; max-height:100%;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
#lightbox button{
  position:absolute; top:18px; right:22px;
  width:36px; height:36px; border-radius:50%;
  border:none; background:rgba(255,255,255,0.12);
  color:#fff; cursor:pointer; font-size:1.1rem; line-height:1;
}

.banner{
  font-size:0.78rem;
  padding:8px 20px;
  background:var(--clarify-soft);
  color:var(--clarify);
  text-align:center;
  border-bottom:1px solid var(--border);
}

/* ---------- Projekt-Tabs ---------- */
.project-tabs{
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px 20px 0; max-width:1180px; margin:0 auto; width:100%;
  scrollbar-width:none; box-sizing:border-box;
}
.project-tabs::-webkit-scrollbar{ display:none; }
.project-tab{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  font-size:0.82rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.project-tab::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--dot, var(--accent));
  flex:none;
}
.project-tab-active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.project-tab-active::before{ background:var(--accent-ink); }

.composer-project-select{
  padding:6px 10px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  font-size:0.82rem;
  font-family:inherit;
}
.composer input[type="text"]{
  width:100%;
  border:none; background:transparent; color:var(--ink);
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:0.92rem;
  padding:8px 2px;
}
.composer input[type="text"]:focus{ outline:none; }

/* ---------- Karten-Meta (Projekt/Kunde) ---------- */
.card-meta-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.card-meta-row .card-time{ margin-bottom:0; }
.project-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.7rem; font-weight:600;
  padding:2px 8px; border-radius:20px;
  background:var(--surface-2);
  color:var(--ink-muted);
}
.project-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--dot); }
.badge-kunde{
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  padding:2px 7px; border-radius:20px;
  background:var(--accent-soft); color:var(--accent);
}

/* ---------- Öffentliches Formular & Status-Seite ---------- */
.public-form-card{ max-width:440px; text-align:left; }
.public-form-card h1{ text-align:center; }
.public-form-card > p{ text-align:center; }
.public-form{ gap:14px; }
.public-form-label{ font-size:0.78rem; font-weight:600; color:var(--ink-muted); margin-bottom:-6px; }
.public-form select,
.public-form textarea,
.public-form input[type="email"],
.public-form input[type="file"]{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  font-family:inherit;
  font-size:0.92rem;
}
.public-form textarea{ resize:vertical; min-height:100px; font-family:"IBM Plex Mono", monospace; }
.public-form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.public-form-hint{ font-size:0.76rem; color:var(--ink-muted); text-align:center; margin-top:4px; }

.status-badge{
  display:inline-block;
  font-size:0.78rem; font-weight:700;
  padding:4px 12px; border-radius:20px;
  background:var(--surface-2); color:var(--ink-muted);
  margin:0 auto 16px; text-align:center;
}
.status-badge-open{ background:var(--open-soft); color:var(--open); }
.status-badge-clarify{ background:var(--clarify-soft); color:var(--clarify); }
.status-badge-ki{ background:var(--ki-soft); color:var(--ki); }
.status-badge-done{ background:var(--done-soft); color:var(--done); }

.status-block{ text-align:left; background:var(--surface-2); border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.status-block b{ display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-muted); margin-bottom:4px; }
.status-block-text{ font-size:0.88rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.status-block-clarify{ background:var(--clarify-soft); }
.status-block-clarify b{ color:var(--clarify); }
.status-block-done{ background:var(--done-soft); }
.status-block-done b{ color:var(--done); }

/* ---------- Projektverwaltung ---------- */
.project-list{ display:flex; flex-direction:column; gap:14px; }
.project-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--stripe, var(--border));
  border-radius:9px;
  box-shadow:var(--shadow);
  padding:16px;
  display:flex; flex-direction:column; gap:8px;
}
.project-card-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.project-name-input{
  font-size:1rem; font-weight:700;
  border:1px solid transparent;
  background:transparent;
  color:var(--ink);
  padding:4px 6px;
  border-radius:6px;
  flex:1 1 auto;
  min-width:160px;
  font-family:inherit;
}
.project-name-input:hover, .project-name-input:focus{ border-color:var(--border); background:var(--bg); }
.project-counts{ font-size:0.76rem; color:var(--ink-muted); }
.project-prompt{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Mono", monospace;
  font-size:0.82rem;
  padding:8px 10px;
  resize:vertical;
}
.project-key-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.project-key-status{ font-size:0.76rem; color:var(--ink-muted); }
.project-key-reveal{ background:var(--accent-soft); border-radius:8px; padding:10px 12px; margin-top:4px; }
.project-key-reveal code{
  display:block;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.86rem;
  word-break:break-all;
  color:var(--accent);
}

@media (prefers-reduced-motion: reduce){
  .btn, .gate-submit{ transition:none; }
}