/**
 * StichWerk Frontend-Styles – Präfix stwk-, CSS-Variablen.
 * Akzentfarbe ändern z. B. über: :root { --stwk-accent: #8c1d18; }
 */
:root {
    --stwk-accent: #1f6f54;
    --stwk-accent-contrast: #ffffff;
    --stwk-bg: #f6f4ef;
    --stwk-border: #ddd6c8;
    --stwk-text: #2b2b2b;
    --stwk-muted: #6f6a5e;
    --stwk-radius: 8px;
}

.stwk-tool,
.stwk-overview,
.stwk-single {
    color: var(--stwk-text);
    font-size: 1rem;
    line-height: 1.55;
}

/* Hero */
.stwk-hero { text-align: center; margin: 0 0 1.5rem; }
.stwk-hero-title { font-size: 1.9rem; margin: 0 0 0.4rem; }
.stwk-hero-sub { color: var(--stwk-muted); max-width: 46rem; margin: 0 auto; }

/* Upload-Zone */
.stwk-upload {
    border: 2px dashed var(--stwk-border);
    border-radius: var(--stwk-radius);
    background: var(--stwk-bg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.stwk-upload:hover, .stwk-upload:focus, .stwk-upload.stwk-drag {
    border-color: var(--stwk-accent);
    background: #ffffff;
    outline: none;
}
.stwk-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.stwk-upload-inner { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; }
.stwk-upload-icon { font-size: 2rem; color: var(--stwk-accent); line-height: 1; }
.stwk-upload-text { font-weight: 600; }
.stwk-upload-hint { font-size: 0.85rem; color: var(--stwk-muted); max-width: 34rem; }

/* Optionen */
.stwk-options {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
    margin: 1.25rem 0; padding: 1rem; background: var(--stwk-bg);
    border-radius: var(--stwk-radius);
}
.stwk-option { display: flex; flex-direction: column; gap: 0.25rem; }
.stwk-option label { font-size: 0.85rem; font-weight: 600; }
.stwk-option input[type="number"] { width: 7rem; padding: 0.4rem 0.5rem; }
.stwk-option-check { flex-direction: row; align-items: center; gap: 0.4rem; padding-bottom: 0.4rem; }

/* Buttons */
.stwk-btn {
    display: inline-block; padding: 0.55rem 1.1rem;
    border: 1px solid var(--stwk-accent); border-radius: var(--stwk-radius);
    background: #ffffff; color: var(--stwk-accent);
    font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.stwk-btn:hover, .stwk-btn:focus { background: var(--stwk-accent); color: var(--stwk-accent-contrast); }
.stwk-btn-primary { background: var(--stwk-accent); color: var(--stwk-accent-contrast); }
.stwk-btn-primary:hover, .stwk-btn-primary:focus { opacity: 0.9; background: var(--stwk-accent); }
.stwk-btn[disabled] { opacity: 0.55; cursor: default; }

/* Ergebnis */
.stwk-result { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.stwk-preview-wrap { flex: 1 1 320px; min-width: 0; }
.stwk-preview {
    width: 100%; max-width: 560px; height: auto;
    border: 1px solid var(--stwk-border); border-radius: var(--stwk-radius);
    image-rendering: pixelated; background: #fff;
}
.stwk-preview-hint { font-size: 0.8rem; color: var(--stwk-muted); margin: 0.4rem 0 0; }

.stwk-side { flex: 1 1 280px; min-width: 260px; }
.stwk-stats { display: flex; gap: 1.5rem; margin: 0 0 1rem; padding: 0; flex-wrap: wrap; }
.stwk-stats div { margin: 0; }
.stwk-stats dt { font-size: 0.8rem; color: var(--stwk-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.stwk-stats dd { margin: 0.1rem 0 0; font-size: 1.25rem; font-weight: 700; }

.stwk-legend-title { font-size: 1rem; margin: 1rem 0 0.4rem; }
.stwk-legend { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.stwk-legend-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; break-inside: avoid; font-size: 0.9rem; }
.stwk-swatch { width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid rgba(0,0,0,0.2); flex: none; }
.stwk-symbol { font-weight: 700; width: 1.1rem; text-align: center; flex: none; }
.stwk-legend-label { color: var(--stwk-text); }

.stwk-actions { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.stwk-save { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.stwk-save input[type="text"] { flex: 1 1 12rem; padding: 0.5rem 0.6rem; }
.stwk-save-status { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.stwk-save-status a { color: var(--stwk-accent); font-weight: 600; }
.stwk-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Übersicht */
.stwk-overview { margin-top: 2.5rem; }
.stwk-overview-title { font-size: 1.4rem; }
.stwk-overview-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.stwk-overview-item { padding: 0.3rem 0; break-inside: avoid; }
.stwk-overview-item a { color: var(--stwk-accent); font-weight: 600; text-decoration: none; }
.stwk-overview-item a:hover { text-decoration: underline; }
.stwk-overview-size { color: var(--stwk-muted); font-size: 0.85rem; margin-left: 0.4rem; }
.stwk-overview-empty { color: var(--stwk-muted); }

/* Einzelansicht Muster */
.stwk-single-header { margin-bottom: 1rem; }
.stwk-single-canvas-wrap { overflow-x: auto; border: 1px solid var(--stwk-border); border-radius: var(--stwk-radius); background: #fff; padding: 0.5rem; }
.stwk-single-canvas { display: block; margin: 0 auto; max-width: none; }
.stwk-single-legend { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.stwk-single-legend .stwk-legend-item { font-size: 0.95rem; }
.stwk-single-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0 2rem; }
.stwk-single-note { color: var(--stwk-muted); font-size: 0.9rem; }

@media (max-width: 600px) {
    .stwk-legend { columns: 1; }
    .stwk-overview-list { columns: 1; }
}

/* Druck: nur die Vorlage */
@media print {
    .site-header, .site-footer, .widget-area, .stwk-single-actions,
    .comments-area, .post-navigation, nav, aside, .stwk-single-note { display: none !important; }
    .stwk-single-canvas-wrap { border: none; padding: 0; overflow: visible; }
    .stwk-single { max-width: 100% !important; }
}