/* ==========================================================================
   Museboard
   Ruhige, helle Arbeitsfläche: die Oberfläche hält sich farblich zurück,
   damit die archivierten Farben und Schriften wirken können.
   ========================================================================== */

:root {
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --step-2: 0.75rem;
    --step-1: 0.8125rem;
    --step0: 0.9375rem;
    --step1: 1.0625rem;
    --step2: 1.375rem;
    --step3: 2rem;
    --step4: 2.75rem;

    --gap-xs: 0.375rem;
    --gap-sm: 0.75rem;
    --gap: 1.25rem;
    --gap-lg: 2rem;
    --gap-xl: 3rem;

    --sidebar-w: 248px;
    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='light'] {
    --page: #e9eef6;
    --shell: #ffffff;
    --sidebar: #f7f9fc;
    --surface: #ffffff;
    --surface-soft: #f5f7fa;
    --surface-hover: #eef2f8;
    --border: #e6eaf1;
    --border-strong: #cfd6e2;
    --ink: #0f172a;
    --ink-muted: #64748b;
    --ink-faint: #94a3b8;
    --solid: #0f172a;
    --solid-ink: #ffffff;
    --heart: #ef4444;
    --ok: #15803d;
    --warn: #b45309;
    --error: #dc2626;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.07);
    --tint-a: #d7f2e6;
    --tint-b: #fde2e4;
    --tint-c: #e4e0fb;
    --tint-d: #fdecc8;
}

[data-theme='dark'] {
    --page: #06070a;
    --shell: #101319;
    --sidebar: #0c0e13;
    --surface: #161a21;
    --surface-soft: #1b2028;
    --surface-hover: #212734;
    --border: #252b36;
    --border-strong: #3a4250;
    --ink: #f1f4f9;
    --ink-muted: #9aa5b6;
    --ink-faint: #6b7688;
    --solid: #f1f4f9;
    --solid-ink: #0f172a;
    --heart: #f87171;
    --ok: #4ade80;
    --warn: #fbbf24;
    --error: #f87171;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 34px rgba(0, 0, 0, 0.45);
    --tint-a: #14372a;
    --tint-b: #3d1f26;
    --tint-c: #262051;
    --tint-d: #3d2f12;
}

* { box-sizing: border-box; }

/*
 * Das hidden-Attribut muss stärker sein als jede display-Regel im Stylesheet.
 * Der Browser setzt display:none für [hidden] nur in seinem eigenen
 * Standard-Stylesheet, und das verliert gegen JEDE Regel von hier — schon
 * gegen eine Klasse. Genau das ist im Bildimport passiert: .extract-result
 * hat display:grid, also blieb der Ergebnisblock trotz hidden stehen und
 * überlagerte die Dropzone.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--step0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0; letter-spacing: -0.025em; font-weight: 700; }
h1 { font-size: var(--step3); }
h2 { font-size: var(--step2); }
h3 { font-size: var(--step1); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
a.underline-link { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a.underline-link:hover { text-decoration-color: currentColor; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.875em; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--solid); color: var(--solid-ink);
    padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   Gerüst: Seitenleiste + Arbeitsfläche
   ========================================================================== */

.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    gap: 0;
    min-height: 100vh;
    padding: 14px;
    background: var(--page);
}

.sidebar-nav {
    background: var(--sidebar);
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    padding: var(--gap) var(--gap-sm);
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    position: sticky;
    top: 14px;
    height: calc(100vh - 28px);
    overflow-y: auto;
}

.workspace {
    background: var(--shell);
    border: 1px solid var(--border);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Freigegebene Sammlungen haben keine Seitenleiste — ohne diese Regel
   landet die Arbeitsfläche in der Spalte, die für die Navigation gedacht
   ist, und die ganze Seite ist 248 Pixel breit. */
.app--public { grid-template-columns: minmax(0, 1fr); }
.app--public .workspace { border-radius: var(--radius-xl); }

.brand { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.5rem; }
.brand__mark {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    display: block; object-fit: contain;
}
.auth .brand__mark { width: 34px; height: 34px; border-radius: 9px; }
.wordmark { display: block; width: auto; max-width: 100%; }
.brand__text { font-weight: 700; font-size: var(--step1); letter-spacing: -0.03em; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group__label {
    font-size: var(--step-2); text-transform: none; letter-spacing: 0.01em;
    color: var(--ink-faint); font-weight: 500; padding: 0 0.7rem; margin-bottom: 0.4rem;
}

.nav-link {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
    color: var(--ink-muted); font-weight: 500; font-size: var(--step0);
    transition: var(--transition);
}
.nav-link:hover { background: var(--surface-hover); color: var(--ink); }
.nav-link.is-active { background: var(--surface-hover); color: var(--ink); font-weight: 600; }
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.7; }
.nav-link__badge { margin-left: auto; font-size: var(--step-2); color: var(--ink-faint); font-weight: 500; }

.nav-divider { height: 1px; background: var(--border); margin: 0 0.5rem; }

.sidebar-foot { margin-top: auto; }

.user-chip {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.7rem; border-radius: var(--radius);
    transition: var(--transition);
}
.user-chip:hover { background: var(--surface-hover); }
.user-chip__avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--solid); color: var(--solid-ink);
    display: grid; place-items: center; font-size: var(--step-1); font-weight: 600;
}
.user-chip__name { font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.user-chip__mail { font-size: var(--step-2); color: var(--ink-faint); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Kopfleiste der Arbeitsfläche ---------- */

.workbar {
    display: flex; align-items: center; gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-lg);
    border-bottom: 1px solid var(--border);
}

.searchbox { position: relative; flex: 1; min-width: 0; }
.searchbox svg {
    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none;
}
.searchbox input[type='search'] {
    width: 100%; padding: 0.6rem 0.9rem 0.6rem 2.6rem;
    border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface-soft); font-size: var(--step0); color: var(--ink);
}
.searchbox input[type='search']:focus { background: var(--surface); }
.searchbox input[type='search']::placeholder { color: var(--ink-faint); }

.workbar .menu-btn { display: none; }

.content { padding: var(--gap-lg); flex: 1; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap-lg); flex-wrap: wrap; }
.page-head__text { max-width: 62ch; }
.page-head h1 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
.page-head p { color: var(--ink-muted); margin-top: 0.3rem; }

.back-link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-muted); font-size: var(--step0); margin-bottom: var(--gap); }
.back-link:hover { color: var(--ink); }
.back-link svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ==========================================================================
   Bausteine
   ========================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.6rem 1rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--ink); font: inherit; font-size: var(--step0); font-weight: 500;
    cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn svg { width: 17px; height: 17px; }
.btn--solid { background: var(--solid); border-color: var(--solid); color: var(--solid-ink); font-weight: 600; }
.btn--solid:hover { background: var(--solid); border-color: var(--solid); filter: brightness(1.25); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-muted); }
.btn--quiet:hover { background: var(--surface-hover); color: var(--ink); }
.btn--danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 30%, var(--border)); background: transparent; }
.btn--danger:hover { background: color-mix(in srgb, var(--error) 10%, transparent); border-color: var(--error); }
.btn--sm { padding: 0.35rem 0.65rem; font-size: var(--step-1); border-radius: var(--radius-sm); }
.btn--block { width: 100%; }

.icon-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--ink-muted); cursor: pointer; transition: var(--transition);
}
.icon-btn:hover { color: var(--ink); background: var(--surface-hover); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--solid { background: var(--solid); border-color: var(--solid); color: var(--solid-ink); }
.icon-btn--solid:hover { background: var(--solid); color: var(--solid-ink); filter: brightness(1.25); }

.fav-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; border: 0; background: transparent;
    color: var(--ink-faint); cursor: pointer; transition: var(--transition); padding: 0;
}
.fav-btn:hover { background: var(--surface-hover); color: var(--heart); }
.fav-btn.is-on { color: var(--heart); }
.fav-btn svg { width: 19px; height: 19px; }
.fav-btn.is-on svg { fill: currentColor; }

.chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.28rem 0.7rem; border-radius: 999px;
    background: var(--surface-soft); border: 1px solid transparent;
    font-size: var(--step-1); color: var(--ink-muted); font-weight: 500;
    transition: var(--transition); white-space: nowrap;
}
a.chip:hover { color: var(--ink); background: var(--surface-hover); }
.chip--solid { background: var(--solid); color: var(--solid-ink); }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pill-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--surface-soft); border-radius: var(--radius); margin-bottom: var(--gap); flex-wrap: wrap; }
.pill-tab {
    display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;
    padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); border: 0;
    background: transparent; font: inherit; font-size: var(--step0); font-weight: 500;
    color: var(--ink-muted); cursor: pointer; transition: var(--transition);
}
.pill-tab:hover { color: var(--ink); }
.pill-tab.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }

.tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--border); margin-bottom: var(--gap-lg); flex-wrap: wrap; }
.tab {
    padding: 0.55rem 0; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: var(--step0); color: var(--ink-muted); font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tab-panel[hidden] { display: none; }

.alert {
    padding: 0.8rem 1rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface-soft);
    margin-bottom: var(--gap); font-size: var(--step0);
}
.alert ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.alert--ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.alert--warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.alert--error { border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }

.empty {
    padding: var(--gap-xl) var(--gap); text-align: center;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
    color: var(--ink-muted); background: var(--surface-soft);
}
.empty h3 { color: var(--ink); margin-bottom: 0.4rem; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--gap); }
.panel > h3 { font-size: var(--step1); margin-bottom: var(--gap-sm); }
.panel--soft { background: var(--surface-soft); }

/* ---------- Formularfelder ---------- */

input[type='text'], input[type='search'], input[type='email'], input[type='password'],
input[type='url'], input[type='number'], select, textarea {
    font: inherit; font-size: var(--step0);
    padding: 0.6rem 0.8rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    width: 100%; transition: var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
textarea { resize: vertical; min-height: 5.5rem; line-height: 1.6; }
input[type='color'] { width: 46px; height: 42px; padding: 3px; cursor: pointer; }
/*
 * Dateifelder: Der Knopf darin gehört dem Browser und sieht in jedem anders
 * aus — auf dem Mac grau und eckig, mitten in einer Oberfläche, die sonst
 * ihre eigene Sprache spricht. ::file-selector-button greift genau auf dieses
 * Stück zu, sodass daraus derselbe Knopf wird wie überall sonst.
 */
input[type='file'] {
    font: inherit; font-size: var(--step-1); color: var(--ink-muted);
    width: 100%; padding: 0.45rem 0.6rem;
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
    background: var(--surface-soft);
    transition: var(--transition); cursor: pointer;
}
input[type='file']:hover { border-color: var(--ink-faint); background: var(--surface-hover); }

input[type='file']::file-selector-button {
    display: inline-flex; align-items: center;
    margin-right: 0.7rem; padding: 0.45rem 0.9rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: var(--step-1); font-weight: 500;
    cursor: pointer; transition: var(--transition);
}
input[type='file']:hover::file-selector-button { background: var(--surface-hover); border-color: var(--border-strong); }
select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 16px; padding-right: 2.2rem; }
label { font-size: var(--step0); font-weight: 500; }
.field { margin-bottom: var(--gap); }
.field > label { display: block; margin-bottom: 0.35rem; }
.field__hint { font-size: var(--step-1); color: var(--ink-faint); margin-top: 0.35rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); }
.checkbox { display: flex; align-items: center; gap: 0.55rem; }
.checkbox input { width: auto; }

.filters { display: flex; flex-wrap: wrap; gap: var(--gap-sm); align-items: center; margin-bottom: var(--gap-lg); }
.filters__group { display: flex; gap: 0.4rem; align-items: center; }
.filters__label { font-size: var(--step-1); color: var(--ink-faint); font-weight: 500; }
.filters select { width: auto; min-width: 130px; }
.filters .search-field { flex: 1; min-width: 220px; }

/* ==========================================================================
   Raster und Karten
   ========================================================================== */

.grid { display: grid; gap: var(--gap); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }

.section { margin-bottom: var(--gap-xl); }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap); flex-wrap: wrap; }
.section__head h2 { font-size: var(--step2); }

.stat {
    display: flex; align-items: center; gap: 0.9rem;
    padding: var(--gap); border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border);
    transition: var(--transition);
}
.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.stat__icon { width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; flex-shrink: 0; color: var(--ink); }
.stat__icon svg { width: 20px; height: 20px; }
.stat__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.stat__label { font-size: var(--step-1); color: var(--ink-muted); }

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: var(--transition); display: flex; flex-direction: column;
    color: inherit;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.card__body { padding: 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.card__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.card__title { font-weight: 600; font-size: var(--step0); letter-spacing: -0.01em; }
.card__meta { font-size: var(--step-1); color: var(--ink-faint); }
.card__foot { border-top: 1px solid var(--border); padding: 0.6rem 0.95rem; display: flex; align-items: center; justify-content: space-between; font-size: var(--step-1); color: var(--ink-muted); }

/* ---------- Farbfelder ---------- */

.swatch-strip { display: flex; height: 96px; width: 100%; }
.swatch-strip > * { flex: 1; border: 0; padding: 0; cursor: pointer; }
.swatch-strip--sm { height: 58px; }
.swatch-strip--xs { height: 30px; border-radius: var(--radius-sm); overflow: hidden; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--gap-sm); }
.swatch-tile { display: flex; flex-direction: column; gap: 0.5rem; }
.swatch-tile__color {
    aspect-ratio: 5 / 4; border-radius: var(--radius-lg); border: 1px solid rgba(15, 23, 42, 0.06);
    width: 100%; padding: 0; cursor: pointer; display: grid; place-items: center;
    transition: var(--transition);
}
.swatch-tile__color:hover { transform: scale(1.015); }
.swatch-tile__copy { font-size: var(--step-1); opacity: 0; transition: var(--transition); font-weight: 500; }
.swatch-tile__color:hover .swatch-tile__copy { opacity: 0.85; }
.swatch-tile__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
}
.swatch-tile__hex { font-family: var(--font-mono); font-size: var(--step-1); font-weight: 500; }
.swatch-tile__role { font-size: var(--step-2); color: var(--ink-faint); }
.swatch-tile__values { font-family: var(--font-mono); font-size: var(--step-2); color: var(--ink-faint); }

.copy-icon { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 0.15rem; display: grid; place-items: center; border-radius: 5px; }
.copy-icon:hover { color: var(--ink); background: var(--surface-hover); }
.copy-icon svg { width: 15px; height: 15px; }

/* ---------- Schriften ---------- */

.font-tile { padding: var(--gap); display: flex; flex-direction: column; gap: 0.8rem; }
.font-tile__aa { font-size: 4.2rem; line-height: 1.05; text-align: center; padding: 0.6rem 0 0.2rem; letter-spacing: -0.03em; }
.font-tile__sample { font-size: 1.9rem; line-height: 1.25; overflow-wrap: anywhere; }
.font-tile__missing { color: var(--ink-faint); font-size: var(--step0); font-style: italic; }

.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--gap-sm); }
.style-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--gap-sm); text-align: center; background: var(--surface);
}
.style-card__aa { font-size: 2.2rem; line-height: 1.15; }
.style-card__label { font-size: var(--step-1); color: var(--ink-muted); margin-top: 0.3rem; }

.preview-box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--gap-lg); background: var(--surface); }
.preview-box__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); margin-bottom: var(--gap); }
.preview-box__label { font-size: var(--step0); color: var(--ink-muted); }
.preview-box__sample { font-size: 3rem; line-height: 1.2; overflow-wrap: anywhere; letter-spacing: -0.02em; }

.detail-grid { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--gap-lg); align-items: start; }
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; font-size: var(--step0); margin: 0; }
.detail-list dt { color: var(--ink-muted); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }

.code-block {
    position: relative; background: var(--surface-soft); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.85rem 0.9rem; margin: 0;
    overflow-x: auto; font-size: var(--step-1); line-height: 1.65;
}
.code-block__copy { position: absolute; top: 0.45rem; right: 0.45rem; }

.contrast-table { width: 100%; border-collapse: collapse; font-size: var(--step0); }
.contrast-table th, .contrast-table td { padding: 0.45rem 0.4rem; text-align: left; border-bottom: 1px solid var(--border); }
.contrast-table th { color: var(--ink-faint); font-weight: 500; font-size: var(--step-1); }
.contrast-table tr:last-child td { border-bottom: 0; }
.ratio { font-family: var(--font-mono); }
.ratio--pass { color: var(--ok); }
.ratio--fail { color: var(--ink-faint); }

.license-note { font-size: var(--step-1); padding: 0.7rem 0.85rem; border-radius: var(--radius); background: var(--surface-soft); color: var(--ink-muted); }

/* ---------- Verläufe, Websites, Sammlungen ---------- */

.gradient-card__preview { height: 160px; cursor: pointer; border: 0; width: 100%; padding: 0; display: block; }

.shot { aspect-ratio: 16 / 10; background: var(--surface-soft); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-faint); font-size: var(--step-1); }

.collage { display: grid; grid-template-columns: 2fr 1fr; gap: 3px; height: 150px; background: var(--surface-soft); }
.collage__side { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
.collage__cell { overflow: hidden; display: grid; place-items: center; }
.collage__cell img { width: 100%; height: 100%; object-fit: cover; }
.collage__strip { display: flex; width: 100%; height: 100%; }
.collage__strip > span { flex: 1; }
.collage__aa { font-size: 1.8rem; color: var(--ink-muted); }

/* ---------- Playground ---------- */

.playground { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.playground__controls { display: flex; flex-direction: column; gap: var(--gap); }
.pg-palette-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pg-palette-row span { width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid rgba(15, 23, 42, 0.08); }

.stage { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }

.pg-hero { padding: clamp(1.8rem, 5vw, 3.5rem); }
.pg-hero__eyebrow { font-size: var(--step-1); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; margin-bottom: 1rem; font-weight: 600; }
.pg-hero__title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.035em; margin-bottom: 1.1rem; font-weight: 700; }
.pg-hero__text { font-size: 1.0625rem; line-height: 1.65; max-width: 46ch; opacity: 0.82; margin-bottom: 2rem; }
.pg-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pg-btn { padding: 0.8rem 1.5rem; border-radius: 10px; border: 0; font: inherit; font-weight: 600; font-size: 0.95rem; cursor: default; }
.pg-btn--ghost { background: transparent !important; border: 1px solid currentColor; }
.pg-hero__swatches { display: flex; gap: 0.5rem; margin-top: 2.5rem; }
.pg-hero__swatches span { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.25); }

.pg-centre { padding: clamp(1.5rem, 5vw, 3.5rem); display: grid; place-items: center; min-height: 480px; }
.pg-card { width: min(430px, 100%); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16); }
.pg-card__banner { height: 130px; }
.pg-card__body { padding: 1.7rem; }
.pg-card__title { font-size: 1.6rem; margin-bottom: 0.5rem; letter-spacing: -0.025em; font-weight: 700; }
.pg-card__text { font-size: 0.95rem; line-height: 1.6; opacity: 0.8; margin-bottom: 1.5rem; }
.pg-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pg-price { font-size: 1.4rem; font-weight: 700; }

.pg-form { width: min(410px, 100%); border-radius: 18px; padding: 2.2rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16); }
.pg-form h3 { font-size: 1.6rem; margin-bottom: 0.4rem; letter-spacing: -0.025em; font-weight: 700; }
.pg-form__sub { font-size: 0.92rem; opacity: 0.75; margin-bottom: 1.6rem; }
.pg-field { margin-bottom: 1rem; }
.pg-field label { display: block; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.35rem; }
.pg-field div { padding: 0.75rem 0.9rem; border-radius: 10px; font-size: 0.95rem; opacity: 0.55; }

/* ---------- Anmeldung ---------- */

.auth {
    min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: #0d1117; color: #f1f4f9;
}
.auth__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 5rem); }
.auth__art {
    background: linear-gradient(150deg, #101a2b 0%, #1e2b3f 40%, #4a3a44 75%, #6d4a4a 100%);
    position: relative; overflow: hidden;
}
.auth__art::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 25%, rgba(255, 168, 140, 0.35), transparent 55%),
                radial-gradient(ellipse at 30% 80%, rgba(20, 30, 50, 0.9), transparent 60%);
}
.auth__eyebrow { font-size: var(--step-1); letter-spacing: 0.2em; text-transform: uppercase; color: #98a6bb; margin-bottom: 1.2rem; }
.auth__title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.035em; margin-bottom: 1rem; }
.auth__sub { color: #a9b5c7; max-width: 42ch; margin-bottom: 2.2rem; }
.auth form { max-width: 420px; }
.auth input {
    background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: #f1f4f9;
    padding: 0.85rem 1rem;
}
.auth input::placeholder { color: #7c8a9e; }
.auth label { color: #c3ccd9; }
.auth .btn--solid { background: #f4f6fa; color: #0d1117; border-color: #f4f6fa; padding: 0.85rem 1rem; }
.auth .alert { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: #f1f4f9; }
.auth__foot { margin-top: 2.5rem; color: #7c8a9e; font-size: var(--step-1); }

/* ---------- Verwaltung ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--step0); }
table.data th, table.data td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data th { color: var(--ink-muted); font-weight: 500; font-size: var(--step-1); background: var(--surface-soft); }
table.data tr:last-child td { border-bottom: 0; }
table.data .actions { display: flex; gap: 0.35rem; justify-content: flex-end; }

.repeat-row { display: grid; grid-template-columns: 52px 1fr 1fr 1fr auto; gap: var(--gap-sm); align-items: center; margin-bottom: var(--gap-sm); }
.repeat-row--stops { grid-template-columns: 52px 1fr 110px auto; }
.repeat-row--usages { grid-template-columns: 1fr 1fr auto; }

.picker-list { max-height: 330px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap-sm); display: flex; flex-direction: column; gap: 0.4rem; background: var(--surface); }
.picker-item { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step0); }
.picker-item input { width: auto; }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap-lg); align-items: start; }

/*
 * display:block ist hier Pflicht, kein Feinschliff: Die Dropzone ist ein
 * <label>, und ein Label ist von Haus aus inline. Ohne die Regel umfließt der
 * gestrichelte Rahmen den Inhalt nur zeilenweise, Innenabstand und
 * Zentrierung greifen nicht — das Feld sah aus, als wäre es verrutscht.
 * Dasselbe gilt für die beiden <span> darin.
 */
.dropzone {
    display: block;
    border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
    padding: var(--gap-xl) var(--gap); text-align: center; background: var(--surface-soft);
    transition: var(--transition); cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--ink-muted); background: var(--surface-hover); }
.dropzone__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; margin: 0 auto var(--gap-sm); color: var(--ink-muted); }
.dropzone__icon svg { width: 24px; height: 24px; }
.dropzone__title { display: block; font-weight: 600; font-size: var(--step1); }
.dropzone__hint { display: block; color: var(--ink-faint); font-size: var(--step-1); margin-top: 0.2rem; }

.extract-result { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: var(--gap); align-items: center; margin-top: var(--gap-lg); }
.extract-result__image img { width: 100%; border-radius: var(--radius); display: block; }
.extract-swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.extract-swatches span { width: 74px; height: 92px; border-radius: var(--radius); border: 1px solid rgba(15, 23, 42, 0.08); }

/* ---------- Kurzmeldung ---------- */

.toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 180%);
    background: var(--ink); color: var(--page);
    padding: 0.65rem 1.2rem; border-radius: 999px; font-size: var(--step0); font-weight: 500;
    transition: transform 220ms cubic-bezier(0.34, 1.3, 0.64, 1); z-index: 90;
    pointer-events: none; box-shadow: var(--shadow);
}
.toast.is-visible { transform: translate(-50%, 0); }

.workspace__foot { border-top: 1px solid var(--border); padding: var(--gap) var(--gap-lg); color: var(--ink-faint); font-size: var(--step-1); display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; }

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */

@media (max-width: 1100px) {
    .detail-grid, .playground, .form-grid, .extract-result { grid-template-columns: minmax(0, 1fr); }
    .extract-result__arrow { display: none; }
}

@media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .workspace { border-radius: 0; border: 0; }
    .sidebar-nav {
        position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 60;
        border-radius: 0; height: 100vh; top: 0;
        transform: translateX(-100%); transition: transform var(--transition);
        box-shadow: var(--shadow);
    }
    .sidebar-nav.is-open { transform: translateX(0); }
    .workbar .menu-btn { display: grid; }
    .nav-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 55; }
    .content { padding: var(--gap); }
    .workbar { padding: var(--gap-sm) var(--gap); }
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__art { display: none; }
}

@media (max-width: 600px) {
    .repeat-row { grid-template-columns: 52px 1fr auto; }
    .repeat-row > .repeat-row__role { grid-column: 2 / 4; }
    .page-head h1 { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
    .sidebar-nav, .workbar, .workspace__foot, .btn, .icon-btn, .filters { display: none !important; }
    .app { padding: 0; display: block; }
    .workspace { border: 0; }
}

/* ==========================================================================
   Zuschnitt im Eingang

   Der Ausschnitt wird mit der Maus gezogen, der Rest liegt unter einem
   Schleier. Der Schleier ist ein einzelner, sehr weiter Schatten um den
   Rahmen herum — vier Blenden-Elemente wären dasselbe Bild mit mehr Teilen,
   die beim Ziehen synchron bleiben müssten.
   ========================================================================== */

.cropper {
    position: relative; display: inline-block; max-width: 100%;
    overflow: hidden; border-radius: var(--radius); line-height: 0;
    touch-action: none; user-select: none; cursor: crosshair;
}
.cropper img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; }

.cropper__box {
    position: absolute; box-sizing: border-box;
    border: 1px solid #fff; cursor: move;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.5) inset;
}

/* Drittel-Linien als Hilfe beim Ausrichten. */
.cropper__box::before,
.cropper__box::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-repeat: no-repeat;
}
.cropper__box::before {
    background-image: linear-gradient(to right, rgba(255,255,255,0.35) 1px, transparent 1px);
    background-size: 33.333% 100%;
    background-position: 33.333% 0;
}
.cropper__box::after {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.35) 1px, transparent 1px);
    background-size: 100% 33.333%;
    background-position: 0 33.333%;
}

.cropper__handle {
    position: absolute; width: 14px; height: 14px;
    background: #fff; border-radius: 3px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.5);
}
.cropper__handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.cropper__handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.cropper__handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.cropper__handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }

/* Der Hinweis und der Knopf „Ganzes Bild" stehen nebeneinander. Als Fließtext
   rutschte der Knopf mitten in den Satz, sobald der umbrach. */
.cropper__hint { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--step-1); color: var(--ink-faint); margin-top: 0.5rem; }
.cropper__hint > span { flex: 1 1 14rem; }