/* Bekleidungs-Mengenstepper (Spinner) */
.spinner { display: flex; align-items: center; border: 1px solid var(--slate-200); border-radius: 0.5rem; overflow: hidden; height: 2.75rem; background: #ffffff; }
.spinner button { background: var(--slate-50); border: none; width: 35px; height: 100%; font-size: 1.25rem; cursor: pointer; color: var(--slate-700); }
.spinner input { width: 40px; border: none; text-align: center; font-size: 1rem; font-weight: 700; color: var(--slate-900); outline: none; }

.live-summary { background: var(--slate-900); color: white; padding: 1rem; border-radius: 0.75rem; margin-top: 1.875rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
.summary-list { font-size: 0.8125rem; list-style: none; padding: 0; margin: 0; }
.summary-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--slate-700); padding: 0.375rem 0; }
.summary-list li:last-child { border-bottom: none; }
.btn-submit { width: 100%; padding: 1rem; background: var(--emerald-600); color: white; border: none; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 700; margin-top: 1rem; cursor: pointer; margin-bottom:10px;}
.limit-hint { font-size: 0.625rem; color: var(--red-500); display: block; margin-top: 0.125rem; font-weight: 700; text-transform: uppercase; }

.order-subtitle { color: var(--blue-500); font-weight: 700; font-size: 0.875rem; margin-top: 0.25rem; text-align:right;}
.summary-header { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.5rem; border-bottom: 1px solid var(--slate-700); padding-bottom: 0.375rem; display: flex; align-items: center; gap: 0.5rem; }
.summary-empty { color: var(--slate-400); font-style: italic; }


.main-container {  margin: 0 auto; padding: 4px 16px; display: flex; flex-direction: column; }
.greeting h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; color: #1e293b; }
.greeting p { font-size: 0.875rem; color: #64748b; line-height: 1.5; }

/* Alert Card */
.alert-card { background-color: #fef2f2; border: 1px solid #fecaca; border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.alert-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.badge-important { background-color: #dc2626; color: #ffffff; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.alert-card h3 { font-size: 1rem; font-weight: 700; color: #7f1d1d; }
.alert-card p { font-size: 0.875rem; color: #991b1b; margin-bottom: 16px; line-height: 1.4; }

/* Tool Grid */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool-card { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: all 0.2s ease; cursor: pointer; font-family: inherit; outline: none; }
.tool-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.tool-card:active { background-color: #f8fafc; transform: scale(0.98); }
.tool-icon { font-size: 1.875rem; margin-bottom: 8px; }
.tool-title { font-weight: 700; font-size: 0.875rem; color: #1e293b; }
.tool-desc { font-size: 0.65rem; color: #64748b; margin-top: 4px; }

/* Home Box Item */
.homepage-box-item { background-color: #ffffff; padding: 1.25rem; margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 6px solid #0ea5e9; transition: box-shadow 0.2s ease, border-left-color 0.2s ease; }
.homepage-box-item.is-link:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }