/* Zusatzstile fuer Kundenabnahme */

.approve { max-width: 720px; margin: 0 auto; padding: var(--space-16); }

.head { margin-bottom: var(--space-24); }
.head h1 { font-family: var(--serif); font-size: 1.5rem; color: var(--green); margin-bottom: var(--space-8); }
.meta { display: grid; gap: var(--space-8); color: var(--ink); margin-top: var(--space-12); }
.meta .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-60); }
.meta .value { font-weight: 500; }

.status-note { background: var(--cream); border: 1px solid var(--green-20); border-radius: var(--radius); padding: var(--space-16); text-align: center; }
.status-note h2 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: var(--space-8); }

.section-title { font-family: var(--serif); font-size: 1.125rem; color: var(--green); margin: var(--space-24) 0 var(--space-12); }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.gallery-column { display: flex; flex-direction: column; gap: var(--space-12); }
.gallery-column h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-60); margin-bottom: var(--space-4); }
.media-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); cursor: zoom-in; background: var(--green-10); }
.media-video { width: 100%; border-radius: var(--radius); background: var(--green-10); }

.sign-off { background: #fff; border: 1px solid var(--green-20); border-radius: var(--radius); padding: var(--space-16); margin-top: var(--space-24); }
.sign-off label { display: block; font-weight: 500; margin-bottom: var(--space-6); }
.sign-off input[type="text"] { width: 100%; padding: var(--space-12); border: 1px solid var(--green-20); border-radius: var(--radius); font-size: 1rem; margin-bottom: var(--space-16); }
.pad { border: 1px solid var(--green-30); border-radius: var(--radius); background: #fff; width: 100%; height: 160px; touch-action: none; }
.pad canvas { width: 100%; height: 100%; display: block; }
.pad-hint { font-size: 0.75rem; color: var(--green-60); margin-top: var(--space-4); }

.actions { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-16); }
.actions .secondary { align-self: flex-start; }

.complain { margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--green-20); }
.complain h3 { font-family: var(--serif); font-size: 1rem; color: var(--error); margin-bottom: var(--space-8); }
.complain textarea { width: 100%; min-height: 96px; padding: var(--space-12); border: 1px solid var(--green-20); border-radius: var(--radius); font-size: 1rem; margin-bottom: var(--space-8); }

.done { text-align: center; padding: var(--space-32) var(--space-16); }
.done h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--green); margin-bottom: var(--space-12); }
.done p { color: var(--green-60); }

@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; }
}