/* Wolf Review – Oberfläche von Verwaltung und Review
 *
 * Baut ausschließlich auf den Tokens aus wm-tokens.css auf. Feste Farbwerte
 * stehen hier bewusst nirgends: Ändert sich die Marke, wird die Token-Datei
 * ersetzt und diese Datei bleibt, wie sie ist.
 *
 * Zwei Oberflächen, ein Stylesheet:
 *   .admin   Verwaltungsseiten – heller Seitenkopf, wie die Website
 *   .review  Das Werkzeug – dunkle Leiste, damit die Kundenseite daneben
 *            eindeutig als Inhalt lesbar bleibt und nicht als Teil der Marke
 */

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--text-heading);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  font-weight:var(--fw-bold);
  margin:0;
}
h1{font-size:1.625rem}
h2{font-size:1.125rem;margin:0 0 var(--space-2)}

a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
code{font-family:var(--font-mono);font-size:.92em}

*:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Kleines grünes Label über Abschnitten – das Erkennungszeichen der Marke. */
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-accent);
}

/* ================================================================ Seitenkopf */

.topbar{
  display:flex;gap:var(--space-4);align-items:center;
  padding:var(--space-3) var(--space-5);
  background:var(--surface-page);
  border-bottom:1px solid var(--border-subtle);
}
.topbar .mark{display:inline-flex;align-items:center;flex:none}
.topbar .mark img{display:block;height:26px;width:auto}
.topbar-title{
  font-size:var(--fs-xs);color:var(--text-muted);
  padding-left:var(--space-4);border-left:1px solid var(--border-subtle);
}
.topbar-nav{margin-left:auto;display:flex;gap:var(--space-4);align-items:center;
            font-size:var(--fs-xs)}
.topbar-nav .who{color:var(--text-muted)}
.topbar-nav a{color:var(--text-body);font-weight:var(--fw-semibold)}
.topbar-nav a:hover{color:var(--text-accent)}

/* =============================================================== Grundlayout */

body.admin{display:block;overflow:auto;background:var(--surface-subtle)}
.wrap{max-width:680px;margin:var(--space-7) auto;padding:0 var(--space-5)}
.wrap-wide{max-width:var(--container-max)}

.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-6);
}
.lead{color:var(--text-muted);margin:0 0 var(--space-5);line-height:var(--lh-body)}

.stack{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.row>*{flex:1;min-width:180px}

/* -------------------------------------------------------------- Formularteile */

label{display:flex;flex-direction:column;gap:6px;
      font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-body)}
label .hint{font-weight:var(--fw-regular);color:var(--text-muted);font-size:var(--fs-xs);
            line-height:var(--lh-snug)}

input,textarea,select{
  width:100%;
  font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--text-heading);background:var(--wm-white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:12px 14px;
  transition:border-color var(--dur-base) var(--ease-standard);
}
textarea{resize:vertical;min-height:84px;line-height:var(--lh-snug)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-primary);outline:none}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px}
input[type=checkbox]{width:auto;accent-color:var(--brand-primary)}
.check{flex-direction:row;align-items:center;gap:10px;font-weight:var(--fw-regular);
       font-size:var(--fs-sm)}

/* ------------------------------------------------------------------- Knöpfe */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:14px;font-weight:var(--fw-semibold);
  line-height:1.2;padding:12px 26px;
  border-radius:var(--radius-button);border:1px solid var(--border-subtle);
  background:var(--wm-white);color:var(--text-body);
  text-decoration:none;cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.btn:hover{background:var(--wm-ink-050);color:var(--text-heading)}

.btn.primary{background:var(--brand-primary);border-color:transparent;
             color:var(--brand-on-primary)}
.btn.primary:hover{background:var(--brand-primary-hover);color:var(--brand-on-primary);
                   box-shadow:var(--shadow-accent);transform:translateY(-1px)}
.btn.primary:active{background:var(--brand-primary-active);box-shadow:none;transform:none}

.btn.secondary{background:var(--brand-secondary);border-color:transparent;color:#fff}
.btn.secondary:hover{background:var(--brand-secondary-hover);color:#fff}

.btn.dark{background:var(--wm-ink-900);border-color:transparent;color:#fff}
.btn.dark:hover{background:var(--wm-ink-800);color:#fff}

.btn.ghost{background:transparent;border-color:var(--brand-primary);color:var(--text-accent)}
.btn.ghost:hover{background:var(--wm-green-050);color:var(--text-accent)}

.btn.quiet{background:transparent;border-color:transparent;color:var(--text-muted);
           font-weight:var(--fw-regular)}
.btn.quiet:hover{background:var(--wm-ink-100);color:var(--text-heading)}

.btn.small{padding:8px 18px;font-size:13px}

.btn.danger{color:var(--wm-danger);border-color:var(--wm-ink-200);background:var(--wm-white)}
.btn.danger:hover{background:#fbeded;color:var(--wm-danger)}

/* ----------------------------------------------------------------- Meldungen */

.note{
  margin:0 0 var(--space-4);padding:12px 14px;
  border-radius:var(--radius-sm);border-left:3px solid var(--border-strong);
  background:var(--surface-subtle);
  font-size:var(--fs-sm);line-height:var(--lh-snug);
}
.note-error{background:#fbeded;border-color:var(--wm-danger)}
.note-warn{background:#fdf4e3;border-color:var(--wm-warning)}
.note-ok{background:var(--wm-green-050);border-color:var(--brand-primary)}

.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-size:var(--fs-xs);word-break:break-all}

/* ================================================================= Projekte */

.page-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.page-head h1{margin:0}
.page-head .btn{margin-left:auto}
.page-head .btn+.btn{margin-left:0}

.projects{display:grid;gap:var(--space-3)}
.project{
  display:flex;gap:var(--space-5);align-items:center;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:var(--space-4) var(--space-5);
  transition:box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard);
}
.project:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.project.archived{opacity:.6;box-shadow:none}
.project.archived:hover{transform:none;box-shadow:var(--shadow-card)}
.project-main{min-width:0;flex:1}
.project-main h2{margin:0 0 2px;font-size:1.125rem}
.project-main .url{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.counts{display:flex;gap:6px;flex:none}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:var(--fw-semibold);
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--wm-ink-100);color:var(--wm-ink-700);
}
.pill.open{background:var(--wm-green-100);color:var(--wm-green-800)}
.pill.busy{background:#fdf0d5;color:#8a6200}
.pill.done{background:var(--wm-ink-100);color:var(--text-muted)}
.project-acts{display:flex;gap:8px;flex:none}

.empty-state{
  background:var(--surface-card);border:1px dashed var(--border-strong);
  border-radius:var(--radius-card);padding:var(--space-8);
  text-align:center;color:var(--text-muted);
}

.share-line{display:flex;gap:8px;align-items:center;margin-top:8px}
.share-line input{font-family:var(--font-mono);font-size:var(--fs-xs);padding:9px 12px}
.share-line .lock{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--wm-blue-700);background:var(--wm-blue-100);
  padding:5px 11px;border-radius:var(--radius-pill);
}

/* =============================================================== Review-UI */

body.review{display:flex;flex-direction:column;overflow:hidden;background:var(--wm-ink-100)}

/* ------------------------------------------------------------- Werkzeugleiste
   Dunkel gehalten: Die Kundenseite steht direkt daneben und ist selbst hell.
   Eine weiße Leiste würde mit ihr verschwimmen. */

.bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:none;
  padding:10px var(--space-4);
  background:var(--wm-ink-900);color:var(--wm-white);
}
.bar .mark{display:inline-flex;align-items:center;gap:9px;flex:none;
           padding-right:var(--space-3);border-right:1px solid var(--wm-ink-700)}
.bar .mark img{display:block;height:22px;width:auto}
.bar .mark span{font-family:var(--font-display);font-weight:var(--fw-bold);
                font-size:14px;letter-spacing:var(--ls-heading);color:var(--wm-white)}
.bar .project-name{font-size:var(--fs-xs);color:var(--wm-ink-400);max-width:210px;
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bar input{
  width:auto;padding:9px 12px;
  font-family:var(--font-mono);font-size:13px;
  background:var(--wm-ink-800);color:var(--wm-white);
  border:1px solid var(--wm-ink-700);border-radius:var(--radius-sm);
}
.bar input#url{flex:1;min-width:190px}
.bar input::placeholder{color:var(--wm-ink-500)}
.bar input:focus{border-color:var(--brand-primary);outline:none}

.bar button{
  font-family:var(--font-body);font-size:13px;font-weight:var(--fw-medium);
  line-height:1.2;padding:9px 16px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-pill);
  background:var(--wm-ink-700);color:var(--wm-white);
  transition:background var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.bar button:hover{background:var(--wm-ink-600)}
.bar button.primary,.bar button.on{
  background:var(--brand-primary);color:var(--brand-on-primary);
  font-weight:var(--fw-semibold);
}
.bar button.primary:hover,.bar button.on:hover{background:var(--brand-primary-hover)}
.bar .btn{padding:8px 16px;font-size:13px;background:var(--wm-ink-700);
          border-color:transparent;color:var(--wm-white)}
.bar .btn:hover{background:var(--wm-ink-600);color:var(--wm-white)}

/* Umschalter Desktop/Handy – eine Pille, innen geteilt */
.group{display:inline-flex;background:var(--wm-ink-700);border-radius:var(--radius-pill);
       padding:3px;gap:3px}
.group button{background:transparent;padding:6px 14px;border-radius:var(--radius-pill)}
.group button:hover{background:var(--wm-ink-600)}

.bar .spacer{flex:1}
.bar .sync{font-size:var(--fs-xs);color:var(--wm-ink-400);min-width:76px;text-align:right}

/* ------------------------------------------------------------------- Bühne */

.work{flex:1;display:flex;min-height:0}
.stage{flex:1;min-width:0;display:flex;justify-content:center;
       padding:var(--space-5);overflow:auto;position:relative}
.frame{background:var(--wm-white);border-radius:var(--radius-sm);
       box-shadow:var(--shadow-lg);transform-origin:top center}
iframe{display:block;border:0;background:var(--wm-white);border-radius:inherit}
.hint{margin:auto;max-width:38ch;text-align:center;color:var(--text-muted);
      font-size:var(--fs-sm)}

/* -------------------------------------------------------------- Seitenleiste */

.panel{
  width:364px;flex:none;min-height:0;display:flex;flex-direction:column;
  background:var(--surface-card);border-left:1px solid var(--border-subtle);
}
.panel-head{
  padding:var(--space-4);border-bottom:1px solid var(--border-subtle);flex:none;
  display:flex;flex-direction:column;gap:10px;
}
.panel-head h2{
  margin:0;display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  font-family:var(--font-body);font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-accent);
}
.panel-head h2 span{
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-regular);
  letter-spacing:0;text-transform:none;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Hinweis auf alles, was seit dem letzten Besuch dazugekommen ist */
.fresh{margin:0;display:flex;align-items:center;gap:8px;
       font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-body)}
/* Ohne diese Zeile gewönne "display:flex" gegen das hidden-Attribut des
   Browsers - der Hinweis stünde dann auch da, wenn es nichts Neues gibt. */
.fresh[hidden]{display:none}
.fresh::before{content:"";width:7px;height:7px;border-radius:50%;
               background:var(--wm-info);flex:none}
.fresh a{margin-left:auto;font-weight:var(--fw-regular);color:var(--text-muted)}
.fresh a:hover{color:var(--text-accent)}

.panel-head .search{font-size:13px;padding:8px 12px}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-xs);line-height:1;
  padding:7px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle);background:var(--wm-white);color:var(--text-muted);
  transition:background var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--brand-primary);flex:none}
.chip.busy i{background:var(--wm-warning)}
.chip.done i{background:var(--wm-ink-400)}
.chip b{font-weight:var(--fw-semibold);color:var(--text-heading)}
.chip:hover{background:var(--wm-ink-050)}
.chip.on{background:var(--wm-ink-900);border-color:var(--wm-ink-900);color:var(--wm-white)}
.chip.on b{color:var(--wm-white)}

.onlypage{flex-direction:row;align-items:center;gap:8px;
          font-weight:var(--fw-regular);font-size:var(--fs-xs);color:var(--text-muted)}

/* ------------------------------------------------------------ Kommentarliste */

.list{overflow:auto;flex:1}
.item{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--wm-ink-100)}
.item .top{display:flex;gap:9px;align-items:baseline}

.num{
  flex:none;width:22px;height:22px;border-radius:var(--radius-pill);
  display:grid;place-items:center;position:relative;cursor:pointer;
  font-family:var(--font-body);font-size:11px;font-weight:var(--fw-bold);
  background:var(--brand-primary);
  /* Schwarz statt Weiß: bei 11 px ist Weiß auf diesem Grün zu schwach.
     Die Nadeln in der Kundenseite halten es genauso. */
  color:var(--wm-ink-900);
}
.item.is-busy .num{background:var(--wm-warning);color:var(--wm-white)}
.item.is-done .num{background:var(--wm-ink-300);color:var(--wm-ink-700)}
.item.is-done .text{text-decoration:line-through;color:var(--text-muted)}
.item.flash{background:var(--wm-green-050)}

.who{font-weight:var(--fw-semibold);color:var(--text-heading)}
.who .side{font-weight:var(--fw-regular);color:var(--text-muted);font-size:11px}
.kind{color:var(--text-muted);font-size:var(--fs-xs);margin-left:auto;white-space:nowrap}
.text{margin:7px 0 0;white-space:pre-wrap;line-height:var(--lh-snug)}
.meta{margin:6px 0 0;font-family:var(--font-mono);font-size:11px;line-height:1.5;
      color:var(--text-muted);word-break:break-all}
.meta .tag{display:inline-block;font-family:var(--font-body);
           background:var(--wm-ink-100);color:var(--wm-ink-600);
           border-radius:var(--radius-xs);padding:1px 6px;margin-right:5px}

.acts{margin-top:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.acts select{width:auto;padding:6px 10px;font-size:var(--fs-xs)}
.acts button{
  padding:6px 12px;font-family:var(--font-body);font-size:var(--fs-xs);line-height:1;
  background:var(--wm-white);color:var(--text-body);cursor:pointer;
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  transition:background var(--dur-base) var(--ease-standard);
}
.acts button:hover{background:var(--wm-ink-050)}
.acts .del{margin-left:auto;color:var(--wm-danger);border-color:var(--wm-ink-200)}
.acts .del:hover{background:#fbeded}

/* Status direkt am Kommentar setzen. Steht bewusst nach ".acts button",
   sonst gewinnt dessen helle Grundfarbe bei gleicher Spezifität. */
.statusset{display:inline-flex;border:1px solid var(--border-subtle);
           border-radius:var(--radius-pill);overflow:hidden}
.acts .statusset button{
  padding:6px 12px;border:0;border-right:1px solid var(--border-subtle);
  border-radius:0;background:var(--wm-white);color:var(--text-muted);
}
.acts .statusset button:last-child{border-right:0}
.acts .statusset button:hover{background:var(--wm-ink-050);color:var(--text-heading)}
.acts .statusset button.on{background:var(--brand-primary);color:var(--brand-on-primary);
                           font-weight:var(--fw-semibold)}
.acts .statusset button[data-s=in_progress].on{background:var(--wm-warning);color:var(--wm-white)}
.acts .statusset button[data-s=done].on{background:var(--wm-ink-600);color:var(--wm-white)}

/* Nur-Lese-Anzeige, wenn der Kunde den Status nicht ändern darf */
.statustag{display:inline-flex;align-items:center;gap:6px;
           font-size:var(--fs-xs);color:var(--text-muted)}
.statustag::before{content:"";width:7px;height:7px;border-radius:50%;
                   background:var(--brand-primary)}
.statustag.in_progress::before{background:var(--wm-warning)}
.statustag.done::before{background:var(--wm-ink-400)}

/* Ohne die Kürzung schiebt ein langer Name Datum und Symbol aus der Zeile. */
.item .top .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .top .when{margin-left:auto;flex:none;color:var(--text-muted);font-size:11px;
                 white-space:nowrap}
.item .top .dev{color:var(--text-muted);display:inline-flex;flex:none;align-self:center}

.num .new{position:absolute;top:-3px;right:-3px;width:8px;height:8px;
          border-radius:50%;background:var(--wm-info);
          border:1.5px solid var(--surface-card)}
.item.is-new{background:var(--wm-blue-050)}

/* Gruppierung nach Unterseite, wenn alle Seiten angezeigt werden */
.pagegroup>.head{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px var(--space-4);cursor:pointer;text-align:left;
  background:var(--surface-subtle);border:0;
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--wm-ink-100);
  font-family:var(--font-body);font-size:11px;line-height:1.3;
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-heading);
}
.pagegroup:first-child>.head{border-top:0}
.pagegroup>.head:hover{background:var(--wm-ink-100)}
.pagegroup>.head .caret{flex:none;transition:transform var(--dur-fast) var(--ease-standard)}
.pagegroup.closed>.head .caret{transform:rotate(-90deg)}
.pagegroup>.head .path{font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-regular);
      text-transform:none;letter-spacing:0;color:var(--text-muted);
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagegroup>.head .n{margin-left:auto;flex:none;font-weight:var(--fw-regular);
                    color:var(--text-muted)}
.pagegroup.closed>.body{display:none}

/* ---------------------------------------------------------------- Antworten */

.replies{margin:10px 0 0;padding:0 0 0 var(--space-3);
         border-left:2px solid var(--wm-ink-100)}
.reply{margin:0 0 8px;font-size:var(--fs-xs);line-height:var(--lh-snug)}
.reply b{font-size:var(--fs-xs);color:var(--text-heading)}
.reply .when{color:var(--text-muted);font-size:11px;margin-left:5px}
.reply-form{display:flex;gap:6px;margin-top:8px}
.reply-form input{font-size:var(--fs-xs);padding:8px 12px;border-radius:var(--radius-pill)}
.reply-form button{
  flex:none;padding:8px 16px;font-family:var(--font-body);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);cursor:pointer;
  background:var(--wm-white);color:var(--text-body);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
}
.reply-form button:hover{background:var(--wm-ink-050)}

.empty{padding:var(--space-5) var(--space-4);color:var(--text-muted);font-size:var(--fs-sm)}

.panel-foot{
  flex:none;padding:11px var(--space-4);border-top:1px solid var(--border-subtle);
  font-size:var(--fs-xs);color:var(--text-muted);
  display:flex;gap:10px;align-items:center;
}
.panel-foot a{color:var(--text-body);font-weight:var(--fw-semibold)}
.panel-foot a:hover{color:var(--text-accent)}

/* ---------------------------------------------------------- Zu schmal
   Das Werkzeug ist bewusst nur für den Rechner gebaut: Beurteilt werden
   Desktop- und Handy-Ansicht im Vergleich, und dafür braucht es beide
   nebeneinander. Statt die Kommentarleiste stillschweigend auszublenden,
   sagt der Hinweis, was zu tun ist. */

.toosmall{display:none}

@media (max-width:900px){
  .toosmall{position:fixed;inset:0;z-index:60;background:var(--surface-subtle);
            display:grid;place-items:center;padding:var(--space-5);text-align:center}
  .toosmall .card{max-width:400px}
  .toosmall .lead{margin-bottom:var(--space-3)}
  .bar .project-name,.bar .sync{display:none}
}

/* --------------------------------------------------------- Namensabfrage */

.gate{position:fixed;inset:0;z-index:50;padding:var(--space-5);
      background:rgba(16,20,16,.55);display:grid;place-items:center}
.gate .card{max-width:420px;width:100%;box-shadow:var(--shadow-lg)}
.gate .card .logo{display:block;height:30px;width:auto;margin:0 0 var(--space-4)}