/* Demo ③ – Foto → Materialliste. Nur Kit-Variablen, plus ein heller „Foto"-Block. */

/* Rechtsbündigkeit kommt vom „← Alle Lösungen"-Link (.topbar__back) im Kit – wie bei den übrigen Demos. */

/* ---- Das Foto vom Zettel (heller Papier-Look im dunklen UI = wirkt abfotografiert) ---- */
.photo{position:relative; padding:22px 20px 14px; display:flex; flex-direction:column; align-items:center;}
.photo__paper{
  width:100%; max-width:330px; background:#f3ecdd; color:#2b2f38;
  border-radius:6px; padding:20px 22px 24px;
  transform:rotate(-1.4deg);
  box-shadow:0 14px 30px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.15);
  background-image:repeating-linear-gradient(transparent, transparent 30px, rgba(43,47,56,.10) 31px);
}
.nl{
  font-family:'Bradley Hand','Brush Script MT','Segoe Script','Comic Sans MS',cursive;
  font-size:18px; line-height:31px; color:#26405e; letter-spacing:.3px;
}
.nl--title{font-weight:700; font-size:19px; color:#1f2937; margin-bottom:2px;}
.nl--strike{color:#8a8378; text-decoration:line-through; text-decoration-color:#b04a3a; text-decoration-thickness:2px;}
.photo__cap{margin-top:14px; font-size:12px; color:var(--text-soft);}

/* ---- Bestell-Tabelle (rechtes Panel) ---- */
.doc{padding:10px 20px 16px;}
table.order{width:100%; border-collapse:collapse; font-size:13px;}
table.order th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-soft); font-weight:600; padding:8px 8px; border-bottom:1px solid var(--border-strong);
}
table.order th.num, table.order td.num{text-align:right; font-variant-numeric:tabular-nums;}
table.order td{padding:11px 8px; border-bottom:1px solid var(--border); vertical-align:top;}
table.order tbody tr{opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease;}
table.order tbody tr.show{opacity:1; transform:none;}

/* erkannter (Roh-)Text links – wie auf dem Zettel */
.erk{font-size:12px; color:var(--text-muted); font-style:italic;}
/* zugeordneter Katalog-Artikel */
.art{font-weight:500; color:var(--text); display:block; line-height:1.35;}
.artnr{font-size:11px; color:var(--text-soft); font-variant-numeric:tabular-nums;}
table.order td.menge{color:var(--text-muted); white-space:nowrap;}

/* ignorierte (durchgestrichene) Zeile */
tr.row--ignored td{color:var(--text-soft);}
tr.row--ignored .erk{text-decoration:line-through; text-decoration-color:var(--red);}
tr.row--ignored .art{color:var(--text-soft); font-weight:400;}

.sums{margin-top:14px; border-top:1px solid var(--border-strong); padding-top:6px;}
.sumrow{
  display:flex; justify-content:space-between; padding:7px 8px; font-size:13px;
  color:var(--text-muted); opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.sumrow.show{opacity:1; transform:none;}
.sumrow .v{font-variant-numeric:tabular-nums; color:var(--text);}
.sumrow--total{
  margin-top:4px; padding:12px 8px; border-top:1px solid var(--border-strong);
  font-size:16px; font-weight:700; color:var(--text);
}
.sumrow--total .v{color:var(--accent-bright);}
.doc__foot{font-size:11.5px; color:var(--text-soft); padding:10px 8px 0; opacity:0; transition:opacity .4s ease;}
.doc__foot.show{opacity:1;}

.badges{display:flex; flex-wrap:wrap; gap:8px; padding:2px 20px 14px;}
.badge{
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px;
  background:var(--neutral-bg); color:var(--text-muted);
  opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease;
}
.badge.show{opacity:1; transform:none;}
.badge.accent{background:var(--blue-bg); color:var(--accent-bright);}