/* ===================== GENERIC ===================== */
/* Wiederverwendbare Bausteine, die auf mehreren Seiten vorkommen:
   Karten, Buttons (primary/secondary/danger), Status-Pills, Toasts (kurze
   Erfolgsmeldungen unten rechts), die Foto-Lightbox und die Sterne-Bewertung. */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 6px 24px rgba(15,57,48,.035); }
.primary-btn, .secondary-btn, .btn-danger{ border:0; border-radius:13px; padding:12px 18px; font-weight:700; cursor:pointer; transition:.2s; font-size:13.5px; }
.primary-btn{ background:var(--accent); color:var(--brand); }
.primary-btn:hover{ transform:translateY(-1px); background:#e9ffc7; }
.secondary-btn{ background:var(--surface-soft); color:var(--brand-2); }
.secondary-btn:hover{ background:var(--selected-bg); }
.btn-danger{ background:var(--danger); color:#fff; }
.full{ width:100%; }
.text-btn{ border:0; background:transparent; color:var(--brand-2); cursor:pointer; font-weight:700; padding:8px 0; font-size:13px; }
button:disabled{ opacity:.45; cursor:not-allowed; }

.status-tag{ display:inline-flex; align-items:center; background:var(--green-soft); color:var(--brand-2); border-radius:99px; padding:6px 11px; font-size:11px; font-weight:700; white-space:nowrap; }
.status-tag.urgent{ background:var(--danger-bg); color:var(--danger); }
.status-tag.scheduled{ background:var(--info-bg); color:var(--info); }
.status-tag.pending{ background:var(--warning-bg); color:var(--warning); }

.section-heading, .content-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.section-heading{ margin:38px 0 16px; }
.section-heading h2, .content-toolbar h2{ margin:4px 0 0; font-size:24px; }
.content-toolbar{ margin-bottom:24px; align-items:flex-start; }
.content-toolbar p:not(.eyebrow){ margin:8px 0 0; color:var(--muted); font-size:14px; max-width:480px; }

.empty{ text-align:center; padding:46px 20px; color:var(--muted); }
.empty .ic{ font-size:30px; margin-bottom:8px; }

.toast-wrap{ position:fixed; right:22px; top:22px; z-index:110; display:flex; flex-direction:column; gap:10px; }
.lightbox-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.86); z-index:300; align-items:center; justify-content:center; padding:30px; }
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{ max-width:92vw; max-height:88vh; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.lightbox-close{ position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer; }
.lightbox-close:hover{ background:rgba(255,255,255,.26); }
.star-picker{ display:flex; gap:4px; }
.star-btn{ background:transparent; border:0; font-size:30px; line-height:1; padding:2px; cursor:pointer; color:var(--line); transition:.15s; }
.star-btn:hover{ transform:scale(1.1); }
.star-btn.filled{ color:var(--accent-strong); }
.stars-display{ font-size:20px; letter-spacing:3px; }
.stars-display .star{ color:var(--line); }
.stars-display .star.on{ color:var(--accent-strong); }
.rating-panel{ padding:22px 24px; }
.rating-heading{ font-size:15px; margin:2px 0 12px; }
.rating-comment-display{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.rating-thanks{ font-size:11px; color:var(--muted); margin-top:10px; }
.rating-comment-input{ margin-top:12px; width:100%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:12px; padding:10px 12px; resize:vertical; }
.rating-submit-btn{ margin-top:12px; }
.toast{
  background:var(--brand); color:#fff; padding:13px 17px; border-radius:16px; box-shadow:var(--shadow-lg);
  display:flex; gap:10px; align-items:center; animation:toastin .25s ease; max-width:300px;
}
.toast .tico{ width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--brand); display:grid; place-items:center; font-weight:800; flex-shrink:0; font-size:13px; }
.toast .ttext strong{ display:block; font-size:12.5px; }
.toast .ttext span{ display:block; font-size:11px; color:rgba(255,255,255,.65); margin-top:1px; }
@keyframes toastin{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} }