/* Nur Weboberfläche. Die Signatur liegt in einem eigenen Vorschau-Dokument. */
.generator-ui, .generator-ui * { box-sizing:border-box; }
.generator-ui {
  margin:0; background:#f6f7f8; color:#202326;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;
}
.generator-ui .ui-shell { max-width:1168px; margin:0 auto; padding:56px 24px 24px; }
.generator-ui .ui-header { margin-bottom:36px; }
.generator-ui .ui-club { margin:0 0 12px; font-size:12px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:#60676d; }
.generator-ui h1 { margin:0 0 12px; font-size:clamp(28px, 4vw, 40px); font-weight:650; letter-spacing:-.035em; line-height:1.15; }
.generator-ui .ui-intro { margin:0; color:#626970; max-width:600px; }
.generator-ui .ui-grid { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); align-items:start; gap:24px; }
.generator-ui .ui-card { min-width:0; background:#fff; border:1px solid #dfe2e5; border-radius:14px; padding:28px; }
.generator-ui .ui-section-heading { display:flex; align-items:center; gap:12px; }
.generator-ui .ui-step { display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; height:28px; border:1px solid #dfe2e5; border-radius:50%; font-size:12px; color:#626970; }
.generator-ui .ui-section-heading h2 { margin:0; font-size:18px; line-height:1.35; font-weight:600; letter-spacing:-.015em; }
.generator-ui .ui-description { margin:12px 0 24px; font-size:14px; color:#626970; }
.generator-ui .ui-field { margin-bottom:20px; }
.generator-ui .ui-field label { display:block; margin:0 0 8px; font-size:14px; font-weight:550; }
.generator-ui .ui-optional { margin-left:6px; font-size:12px; font-weight:400; color:#6a7178; }
.generator-ui .ui-field input, .generator-ui .signature-help select {
  width:100%; max-width:100%; min-width:0; min-height:48px; border:1px solid #cbd0d5;
  border-radius:8px; background:#fff; color:#202326; padding:11px 13px; font:inherit; font-size:16px;
}
.generator-ui .ui-field input::placeholder { color:#727980; opacity:1; }
.generator-ui .ui-field input:focus-visible, .generator-ui .ui-button:focus-visible,
.generator-ui summary:focus-visible, .generator-ui .signature-help select:focus-visible,
.generator-ui .ui-source textarea:focus-visible { outline:2px solid #616970; outline-offset:3px; }
.generator-ui .ui-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 18px; border-radius:8px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-align:center; }
.generator-ui .ui-button-secondary { border:1px solid #cbd0d5; background:#fff; color:#202326; }
.generator-ui .ui-button-secondary:hover { background:#f5f6f7; }
.generator-ui .ui-generate { width:100%; margin-top:4px; }
.generator-ui .ui-form-note { margin:16px 0 0; font-size:12px; color:#6a7178; }
.generator-ui .ui-preview-stage { min-width:0; padding:20px; background:#f5f6f7; border:1px solid #e5e7e9; border-radius:10px; }
.generator-ui .ui-preview-sheet { min-width:0; padding:24px; background:#fff; border:1px solid #e5e7e9; border-radius:4px; }
.generator-ui #signature-preview { display:block; width:100%; height:380px; min-height:160px; border:0; }
.generator-ui .ui-empty-preview { display:flex; min-height:260px; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#727980; }
.generator-ui .ui-empty-preview p { margin:4px 0; font-size:13px; max-width:240px; }
.generator-ui .ui-empty-preview .ui-empty-title { font-size:15px; font-weight:550; color:#42494f; }
.generator-ui .ui-takeover { margin-top:28px; }
.generator-ui .ui-button-primary { width:100%; min-height:54px; margin-top:18px; border:1px solid #202326; background:#202326; color:#fff; font-size:16px; }
.generator-ui .ui-button-primary:hover:not(:disabled) { background:#353b40; border-color:#353b40; }
.generator-ui .ui-button:disabled { background:#edf0f2; border-color:#e1e5e8; color:#717980; cursor:not-allowed; }
.generator-ui .ui-copy-hint { margin:12px 0 0; font-size:13px; color:#626970; }
.generator-ui .ui-copy-status { min-height:20px; margin:6px 0 0; font-size:13px; font-weight:550; color:#42494f; overflow-wrap:anywhere; }
.generator-ui .ui-options { margin-top:16px; padding-top:18px; border-top:1px solid #e5e7e9; }
.generator-ui .ui-options > summary { font-size:13px; color:#626970; cursor:pointer; }
.generator-ui .ui-download-form { margin-top:16px; }
.generator-ui .ui-option-hint { margin:10px 0 0; font-size:12px; color:#6a7178; }
.generator-ui .ui-source { margin-top:16px; }
.generator-ui .ui-source summary { font-size:12px; color:#626970; cursor:pointer; }
.generator-ui .ui-source-label { display:block; margin:12px 0 6px; font-size:12px; color:#626970; }
.generator-ui .ui-source textarea { width:100%; max-width:100%; min-height:200px; padding:12px; border:1px solid #cbd0d5; border-radius:8px; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:12px; resize:vertical; }
.generator-ui .ui-errors { margin:0 0 24px; padding:18px 20px; border:1px solid #d6b9b9; border-radius:10px; background:#fffafa; font-size:14px; }
.generator-ui .ui-errors ul { margin:8px 0 0; padding-left:20px; }
.generator-ui .ui-footer { padding:24px 0 0; text-align:center; font-size:12px; color:#727980; }
@media (max-width:900px) {
  .generator-ui .ui-shell { max-width:680px; padding-top:36px; }
  .generator-ui .ui-grid { grid-template-columns:minmax(0, 1fr); gap:20px; }
}
@media (max-width:480px) {
  .generator-ui .ui-shell { padding:28px 16px 20px; }
  .generator-ui .ui-header { margin-bottom:24px; }
  .generator-ui .ui-card { padding:20px; border-radius:12px; }
  .generator-ui .ui-preview-stage { padding:10px; }
  .generator-ui .ui-preview-sheet { padding:10px; }
  .generator-ui .ui-section-heading h2 { font-size:17px; }
  .generator-ui .ui-intro { font-size:14px; }
  .generator-ui .ui-empty-preview { min-height:200px; }
}