.anim-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.anim-card { border:2px solid #2a2a2a; border-radius:10px; padding:1.25rem; background:#0a0a0a; transition:all 0.2s; }
.anim-card:hover { border-color:#a09070; }
.anim-card.selected { border-color:#e8b84b; box-shadow:0 0 0 3px rgba(232,184,75,0.15); }
.anim-icon { font-size:1.5rem; margin-bottom:0.5rem; }
.anim-label { font-weight:700; color:#f0e6d0; margin-bottom:0.3rem; font-size:0.95rem; }
.anim-desc { font-size:0.82rem; color:#a09070; margin-bottom:0.3rem; }
.anim-suitable { font-size:0.75rem; color:#6b6055; }
@media(max-width:480px) { .anim-grid { grid-template-columns:1fr; } }



.pages-tabs { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.page-tab { padding:0.5rem 1rem; border:1px solid #2a2a2a; border-radius:6px; background:#0a0a0a; color:#a09070; cursor:pointer; font-size:0.85rem; min-height:36px; transition:all 0.2s; }
.page-tab:hover { border-color:#a09070; color:#f0e6d0; }
.page-tab.active { border-color:#e8b84b; color:#e8b84b; background:#141414; }
.page-tab--add { border-style:dashed; }
.page-content { display:none; }
.page-content.active { display:block; }
.page-name-row { display:flex; gap:0.75rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.page-name-input { flex:1; min-width:140px; padding:0.6rem 0.8rem; background:#0a0a0a; border:1px solid #2a2a2a; border-radius:6px; color:#f0e6d0; font-size:0.95rem; }
.btn-remove-page { padding:0.5rem 0.75rem; background:transparent; border:1px solid #c03030; border-radius:6px; color:#c03030; cursor:pointer; font-size:0.8rem; white-space:nowrap; min-height:36px; }
.page-parent-select { display:flex; align-items:center; gap:0.5rem; min-width:0; flex:1 1 220px; }
.page-parent-label { font-size:0.72rem; color:#6b6055; white-space:nowrap; flex-shrink:0; }
.parent-select { background:#0a0a0a; border:1px solid #2a2a2a; border-radius:6px; color:#f0e6d0; padding:0.5rem 0.6rem; font-size:0.82rem; font-family:inherit; min-height:36px; outline:none; min-width:0; flex:1; max-width:100%; }
.parent-select:focus { border-color:#e8b84b; }
@media(max-width:600px){
  .page-name-row { flex-direction:column; align-items:stretch; }
  .page-parent-select { flex:1 1 auto; }
}
.blocks-label { font-size:0.8rem; font-weight:600; color:#a09070; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.75rem; }
.blocks-chooser { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.block-choice { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 0.75rem; border:1px solid #2a2a2a; border-radius:6px; cursor:pointer; background:#0a0a0a; transition:all 0.2s; font-size:0.85rem; color:#a09070; min-height:36px; }
.block-choice:hover { border-color:#a09070; color:#f0e6d0; }
.block-choice.checked { border-color:#e8b84b; color:#e8b84b; background:#1a1500; }
.block-choice-icon { font-size:1rem; }

/* ---- Font Assignments (Step 3) ---- */
.font-assignments {
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.fa-header {
    padding: 0.6rem 1rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b6055;
    border-bottom: 1px solid #2a2a2a;
}
.fa-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #1a1a1a;
}
.fa-row:last-child { border-bottom: none; }
.fa-role {
    font-size: 0.78rem;
    color: #a09070;
    min-width: 100px;
    flex-shrink: 0;
}
.fa-value {
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    color: #f0e6d0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fa-change {
    font-size: 0.75rem;
    color: #e8b84b;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(232,184,75,0.3);
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
}
.fa-change:hover { background: rgba(232,184,75,0.1); }

/* ---- Font Picker Overlay ---- */
.font-picker {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
}
@media(min-width:600px) {
    .font-picker { justify-content: center; }
}
.fp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 540px;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.25rem;
}
.fp-header span { font-size: 0.9rem; color: #f0e6d0; font-weight: 600; }
.fp-close {
    background: transparent;
    border: none;
    color: #a09070;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    min-width: 32px; min-height: 32px;
}
.fp-search-wrap {
    width: 100%; max-width: 540px;
    background: #141414;
    border-left: 1px solid #2a2a2a;
    border-right: 1px solid #2a2a2a;
    padding: 0.75rem 1.25rem 0.5rem;
}
.fp-search {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #f0e6d0;
    font-size: 0.9rem;
}
.fp-search:focus { outline: none; border-color: #e8b84b; }
.fp-grid {
    width: 100%; max-width: 540px;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-top: none;
    border-radius: 0 0 12px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
    gap: 0.5rem;
}
.fp-card {
    border: 2px solid #2a2a2a;
    border-radius: 8px;
    padding: 0.85rem 0.75rem;
    background: #0a0a0a;
    transition: all 0.15s;
    min-height: 44px;
    min-width: 0;
}
.fp-card:hover { border-color: #a09070; }
.fp-card.active { border-color: #e8b84b; background: #1a1400; }
.fp-preview {
    font-size: 1.4rem;
    color: #f0e6d0;
    margin-bottom: 0.4rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.fp-name {
    font-size: 0.72rem;
    color: #a09070;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.fp-cat {
    font-size: 0.65rem;
    color: #4a4040;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Preset-Picker (Step 1 Schnellstart) ---- */
.preset-applied-banner{display:flex;align-items:center;gap:0.6rem;background:#0d1f0d;border:1px solid #2a5a2a;color:#8fcf8f;padding:0.85rem 1.1rem;border-radius:8px;font-size:0.88rem;margin-bottom:1.5rem}
.preset-applied-banner svg{flex-shrink:0;color:#5fb85f}
.preset-picker{margin-bottom:1.75rem}
.preset-picker-title{font-size:0.95rem;font-weight:700;color:#f0e6d0;margin-bottom:0.3rem}
.preset-picker-sub{font-size:0.82rem;color:#6b6055;margin-bottom:1rem}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.85rem}
.preset-card{display:block;text-decoration:none;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:10px;overflow:hidden;transition:border-color 0.15s,transform 0.15s}
.preset-card:hover{border-color:#e8b84b;transform:translateY(-2px);text-decoration:none}
.preset-card-swatch{height:56px;display:flex;align-items:center;justify-content:center}
.preset-card-dot{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,0.08)}
.preset-card-label{font-size:0.82rem;font-weight:600;color:#f0e6d0;padding:0.6rem 0.75rem 0.15rem}
.preset-card-meta{font-size:0.7rem;color:#6b6055;padding:0 0.75rem 0.7rem}
.preset-divider{text-align:center;font-size:0.78rem;color:#4a4040;margin:1rem 0 1.5rem;text-transform:uppercase;letter-spacing:0.05em}