:root{ --bg:#f7fafc; --panel:#ffffff; --ink:#1f2937; --muted:#6b7280; --brand:#2563eb; --ok:#059669; --warn:#b45309; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--ink); background:var(--bg); }

.app-header{ padding:1.25rem 1rem; background:linear-gradient(180deg,#ebf2ff,#f7fafc); border-bottom:1px solid #e5e7eb; }
.app-header h1{ margin:0 0 .25rem; }
.app-header p{ margin:0; color:var(--muted); }
.app-footer{ padding:1rem; text-align:center; color:var(--muted); }

.container{ max-width:1200px; margin:1rem auto; padding:0 1rem; display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.panel{ background:var(--panel); border:1px solid #e5e7eb; border-radius:14px; padding:1rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.panel h2{ margin-top:0; }

.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; }
.grid > * { min-width:0; }
fieldset{ border:1px solid #e5e7eb; border-radius:10px; padding:.75rem; }
legend{ padding:0 .4rem; color:var(--muted); }
label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.25rem; }
input, textarea, select{ width:100%; padding:.6rem .7rem; border:1px solid #d1d5db; border-radius:10px; font:inherit; background:#fff; }
input:focus, textarea:focus{ outline:2px solid #c7d2fe; border-color:#93c5fd; }
textarea{ resize:vertical; }

.mode{ display:flex; gap:1rem; margin-bottom:.5rem; color:var(--muted); }
.actions{ display:flex; gap:.5rem; align-items:center; margin-top:.75rem; }
.actions .spacer{ flex:1; }
button{ padding:.6rem .9rem; border:1px solid #d1d5db; border-radius:10px; background:#fff; cursor:pointer; font-weight:600; }
button.primary{ background:var(--brand); color:#fff; border-color:transparent; }
button.secondary{ background:#f3f4f6; }
button:disabled{ opacity:.6; cursor:not-allowed; }

/* Briefvorschau */
.preview-panel .letter{ position:relative; padding:2rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff; min-height:420px; }
.letter .sender{ position:absolute; top:1.2rem; right:1.5rem; white-space:pre-line; text-align:right; color:var(--muted); }
.letter .recipient{ margin-top:2.2rem; white-space:pre-line; }
.letter .place-date{ margin-top:1rem; text-align:right; }
.letter .salutation{ margin-top:1rem; }
.letter .body{ margin-top:.5rem; line-height:1.5; white-space:pre-wrap; }
.letter .closing{ margin-top:1rem; }
.letter .signature{ margin-top:.2rem; font-family:"Segoe Script", "Bradley Hand", cursive; font-size:1.2rem; }

/* Antwortbereich */
.response{ margin-top:1rem; border:1px dashed #cbd5e1; padding:1rem; border-radius:12px; background:#f8fafc; }
.response h3{ margin-top:0; }
.response .meta{ color:var(--muted); font-size:.9rem; }

/* Checkliste */
.tips{ margin-top:.5rem; }
#checklist{ list-style:none; padding-left:0; }
#checklist li{ padding:.35rem .6rem; margin:.25rem 0; border-radius:8px; border:1px solid #e5e7eb; }
#checklist li.ok{ border-color:#bbf7d0; background:#f0fdf4; color:var(--ok); }
#checklist li.warn{ border-color:#fed7aa; background:#fff7ed; color:var(--warn); }

/* Konfetti */
#confetti{ position:fixed; left:0; top:0; width:100%; height:0; pointer-events:none; overflow:visible; }
.confetti{ position:fixed; width:8px; height:12px; opacity:.9; border-radius:2px; animation:fall linear forwards; }
@keyframes fall{
  0%{ transform:translateY(-10vh) rotate(0deg); }
  100%{ transform:translateY(110vh) rotate(720deg); }
}

/* Responsive */
@media (max-width: 960px){ .container{ grid-template-columns: 1fr; } .grid{ grid-template-columns:1fr; } }

/* Druck nur Brief */
@media print{
  body{ background:#fff; }
  header, .form-panel, .response, footer, #confetti{ display:none !important; }
  .preview-panel{ box-shadow:none; border:none; }
  .preview-panel .letter{ border:none; padding:0; }
}