/* ======================================================================
   feedback.css · Feedback-Seite: Formular, Hinweise, Quittung und Verfolgen-Ansicht.
   Baut auf theme.css auf (Karten, Felder, Reiter, Buttons).
   ====================================================================== */

/* ---------- Raster ---------- */
.fb-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s5);align-items:start}
@media (max-width:880px){.fb-grid{grid-template-columns:1fr}}
.fb-side{display:grid;gap:var(--s5)}

/* ---------- Formular ---------- */
.fb-tabs{display:inline-flex}
.fb .field.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:560px){.fb .field.two{grid-template-columns:1fr}}
.fb textarea{min-height:180px}
#catNote:empty{display:none}
#submitBtn{min-width:200px}
@media (max-width:560px){#submitBtn{width:100%}}

/* ---------- Seitenleiste ---------- */
.steps{margin:0;padding-left:1.4em;display:grid;gap:var(--s3)}
.steps li::marker{color:var(--accent-2);font:700 var(--fs-2) var(--font-pixel)}
.trackform{display:flex;gap:var(--s2)}
.trackform input{flex:1;min-width:0}
.trackform .btn{flex:none}
.trackform + .hint{margin:var(--s3) 0 0;color:var(--dim)}

/* ---------- Quittung nach dem Senden ---------- */
.receipt{text-align:center;padding:var(--s4) 0}
.receipt-board{display:block;margin:0 auto var(--s3)}
.receipt-kicker{margin:0;color:var(--accent);font:700 var(--fs-2) var(--font-pixel);text-transform:uppercase;letter-spacing:.06em}
.receipt-no{margin:var(--s1) 0 var(--s4);font:700 var(--fs-5)/1.2 var(--font-pixel)}
.receipt-no b{color:var(--accent-2)}
.receipt p{max-width:46ch;margin-inline:auto}
.copyrow{display:flex;gap:var(--s2);max-width:560px;margin:var(--s4) auto}
.copyrow input{flex:1;min-width:0;font:var(--fs-2) var(--font-pixel)}
.receipt-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:var(--s4)}

/* ---------- Verfolgen-Ansicht ---------- */
.trackcard{margin-bottom:var(--s5)}
.track-title{font-size:var(--fs-3);margin:0 0 var(--s4)}
.track-title .chip{vertical-align:middle;margin-right:var(--s1)}
.track-steps{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  font:700 var(--fs-1) var(--font-pixel);text-transform:uppercase;letter-spacing:.04em;color:var(--faint);text-align:center}
.track-steps li{position:relative;padding-top:26px}
.track-steps li span{position:absolute;top:0;left:50%;width:18px;height:18px;margin-left:-9px;background:var(--panel-2);
  border:3px solid var(--edge);box-shadow:inset 0 0 0 2px var(--line);z-index:1}
.track-steps li::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:4px;background:var(--line)}
.track-steps li:first-child::before{display:none}
.track-steps li.done,.track-steps li.now{color:var(--text)}
.track-steps li.done span{background:var(--accent)}
.track-steps li.done::before,.track-steps li.now::before{background:var(--accent)}
.track-steps li.now span{background:var(--accent-2);animation:fb-pulse 1.2s steps(2) infinite}
@keyframes fb-pulse{50%{box-shadow:inset 0 0 0 2px var(--line),0 0 0 3px var(--gold-soft)}}
@media (prefers-reduced-motion:reduce){.track-steps li.now span{animation:none}}
.track-closed{margin:0 0 var(--s4);padding:10px var(--s4);border:2px solid var(--line);border-radius:var(--radius);color:var(--dim)}
.track-sub{margin:var(--s4) 0 var(--s2);font-weight:700}
.track-parts{margin:0;padding-left:1.2em;display:grid;gap:var(--s2)}
.track-parts .chip{margin-left:var(--s1)}