/* ============================================================
   Brand Assets je Kunde (assets/brand.js)
   Eigener Abschnitt ganz unten im Kunden – nach Art sortiert.
   Nur Tokens aus basis.css, damit es auch auf der dunklen „Wir"-Bühne passt.
   ============================================================ */

.brand-kit {
    grid-column: 1 / -1;
    position: relative;
    margin-top: 6px;
    padding: 18px 20px 20px;
    border-radius: 14px;
    background: var(--surface-2);
}
.brand-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.brand-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-title h2 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
}

/* Sprungleiste zu den Abschnitten */
.brand-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.brand-nav button {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--surface);
    border: none;
    border-radius: var(--r-pill);
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.brand-nav button:hover { color: var(--ink); background: color-mix(in srgb, var(--client-color, var(--orange)) 14%, var(--surface)); }
.brand-nav button span { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 2px; }

/* Abschnitte: große untereinander, Dateien + Notizen nebeneinander */
.brand-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}
.brand-sec {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 90px;
}
.brand-sec[data-brand-sec="doc"], .brand-sec[data-brand-sec="notes"] { grid-column: auto; }
.brand-sec[data-brand-sec="doc"]:last-child, .brand-sec[data-brand-sec="notes"]:only-child { grid-column: 1 / -1; }
.brand-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.brand-sec-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.brand-sec-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.brand-hint { margin: 10px 0 0; }

/* „Noch nicht angelegt: + Farben + Schriften …" */
.brand-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.brand-add-label { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.brand-chip {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    background: var(--surface);
    color: var(--ink-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-pill);
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.brand-chip:hover {
    background: color-mix(in srgb, var(--client-color, var(--orange)) 14%, var(--surface));
    color: var(--ink);
    border-color: var(--client-color, var(--orange));
    border-style: solid;
}

/* ---- Logos & Beispiele: Kacheln ---- */
.brand-files { display: grid; gap: 12px; }
.brand-logos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.brand-examples { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.brand-tile { margin: 0; min-width: 0; user-select: none; -webkit-user-select: none; }
.brand-tile .ci-file-preview { aspect-ratio: 4 / 3; }
.brand-logos .ci-file-preview img { padding: 14px; }

/* Hintergrund der Logo-Vorschau – umschaltbar */
.brand-kit[data-bg="hell"] .brand-logos .ci-file-preview { background: #FFFFFF; }
.brand-kit[data-bg="dunkel"] .brand-logos .ci-file-preview { background: #232425; border-color: transparent; }
.brand-kit[data-bg="kunde"] .brand-logos .ci-file-preview { background: var(--client-color, var(--orange)); border-color: transparent; }
.brand-bg {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--r-pill);
    background: var(--surface);
    margin-right: 4px;
}
.brand-bg button {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    background: none;
    border: none;
    border-radius: var(--r-pill);
    padding: 4px 10px;
    cursor: pointer;
}
.brand-bg button.on { background: var(--charcoal); color: var(--almond); }
#viewWir .brand-bg button.on { background: var(--almond); color: var(--charcoal); }

/* Beispiele füllen die Kachel und öffnen groß */
.brand-examples .ci-file-preview { background: var(--surface); }
.brand-examples .ci-file-preview[data-key] { cursor: zoom-in; }
.brand-examples .ci-file-preview img { object-fit: cover; padding: 0; transition: transform 0.25s; }
.brand-examples .brand-tile:hover .ci-file-preview img { transform: scale(1.03); }

/* Hauptlogo-Markierung, Stern, Mehr-Knopf */
.brand-tile.is-main .ci-file-preview { box-shadow: 0 0 0 2px var(--client-color, var(--orange)); }
.brand-main-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px 3px 6px;
    border-radius: var(--r-pill);
    background: var(--charcoal);
    color: var(--almond);
    pointer-events: none;
}
.brand-main-badge .ico { width: 12px; height: 12px; color: var(--orange-soft); }
.brand-star, .brand-more {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(var(--ink-rgb), 0.55);
    color: var(--almond);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.brand-star { left: 6px; }
.brand-star .ico { width: 14px; height: 14px; }
.brand-more { right: 6px; }
.brand-tile:hover .brand-star, .brand-tile:hover .brand-more,
.brand-star:focus-visible, .brand-more:focus-visible { opacity: 1; }
.brand-star:hover { background: var(--orange); }
.brand-more:hover { background: var(--charcoal); }
@media (hover: none) { .brand-star, .brand-more { opacity: 0.8; } }

/* ---- Farben ---- */
.brand-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.brand-color {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.brand-color-swatch {
    display: flex;
    align-items: flex-end;
    height: 92px;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    text-align: left;
}
.brand-color-swatch.copied { outline: 2px solid var(--moss); outline-offset: -4px; }
.brand-color-hex { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.brand-color-body { padding: 10px 12px 12px; min-width: 0; }
.brand-color-name { font-weight: 600; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.brand-color-purpose { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.brand-color .ci-codes { margin-top: 8px; }
.brand-card-actions { display: flex; gap: 2px; flex-shrink: 0; }
.brand-color .brand-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px;
    border-radius: 10px;
    background: var(--surface);
    opacity: 0;
    transition: opacity 0.15s;
}
.brand-color:hover .brand-card-actions, .brand-color:focus-within .brand-card-actions { opacity: 1; }
@media (hover: none) { .brand-color .brand-card-actions { opacity: 1; } }

/* ---- Farbkombis ---- */
.brand-combos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.brand-combo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.brand-combo-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    height: 118px;
    padding: 12px 14px 16px;
    border-bottom: 1px solid var(--line);
}
.brand-combo-aa { font-size: 40px; line-height: 1; font-weight: 600; }
.brand-combo-line { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-combo-accent {
    position: absolute;
    left: 14px;
    bottom: 8px;
    width: 42px;
    height: 4px;
    border-radius: 2px;
}
.brand-combo-meta { padding: 10px 12px 10px; min-width: 0; }
.brand-combo-what { font-size: 13px; font-weight: 600; color: var(--ink); }
.brand-combo-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.brand-ctr {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-variant-numeric: tabular-nums;
}
.brand-ctr.good { background: var(--tone-moss); color: var(--tone-moss-ink); }
.brand-ctr.mid { background: var(--tone-orange); color: var(--tone-orange-ink); }
.brand-ctr.bad { background: var(--tone-red); color: var(--tone-red-ink); }

/* ---- Schriften ---- */
.brand-fonts { display: flex; flex-direction: column; gap: 10px; }
.brand-font {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface);
    min-width: 0;
    user-select: none;
    -webkit-user-select: none;
}
.brand-font-aa {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 36px;
    line-height: 1;
    color: var(--ink);
}
.brand-font-body { flex: 1; min-width: 0; }
.brand-font-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.brand-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--client-color, var(--orange)) 16%, var(--surface));
    color: var(--ink);
    vertical-align: 2px;
}
.brand-font-sample {
    margin: 4px 0 6px;
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.brand-font-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-2); }
.brand-font-meta a { color: var(--ink-2); }
.brand-font-meta a:hover { color: var(--orange); }
.brand-warn { color: var(--danger); font-size: 12px; }
.brand-font-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.brand-font-files .ci-code.new { background: var(--tone-moss); color: var(--tone-moss-ink); }

/* ---- Dateien ---- */
.brand-docs { display: flex; flex-direction: column; gap: 4px; }
.brand-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 10px;
    border-radius: 10px;
    background: var(--surface);
    min-width: 0;
    user-select: none;
    -webkit-user-select: none;
}
.brand-doc .file-icon { display: inline-grid; color: var(--ink-2); }
.brand-doc .file-icon .ico { width: 18px; height: 18px; }
.brand-doc-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brand-kit .ci-notes { background: var(--surface); }

/* Kontextmenü an Dateien */
.brand-menu {
    position: fixed;
    z-index: 1000;
    min-width: 190px;
    padding: 6px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-hover), 0 0 0 1px var(--line);
    display: flex;
    flex-direction: column;
}
.brand-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
}
.brand-menu button:hover { background: var(--surface-2); }
.brand-menu button.danger { color: var(--danger); }
.brand-menu .ico { width: 15px; height: 15px; }
.brand-menu-label { font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 8px 10px 2px; }

/* Dialoge */
dialog.dlg-brand { width: min(540px, 94vw); }
.brand-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand-pick input[type=color] { width: 44px; height: 36px; padding: 2px; border-radius: 8px; flex-shrink: 0; }
.brand-pick-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.brand-pick-swatches .ci-chip { width: 26px; height: 26px; border-radius: 8px; }
.brand-combo-preview { margin-top: 16px; border-radius: 12px; border: 1px solid var(--line); }

dialog.dlg-brand-view { width: min(1100px, 96vw); padding: 12px; }
.brand-view { margin: 0; }
.brand-view-img {
    display: grid;
    place-items: center;
    min-height: 240px;
    max-height: 78vh;
    border-radius: 10px;
    background: var(--surface-2);
    overflow: hidden;
}
.brand-view-img img { max-width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.brand-view figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 4px 0;
}
.brand-view figcaption > span:last-child { display: flex; gap: 6px; flex-wrap: wrap; }
.brand-view-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }

/* Auf „Wir" sitzt der Abschnitt in einer Karte */
.wir-detail .brand-kit { margin-top: 0; background: var(--surface); box-shadow: var(--shadow-card); }
.wir-detail .brand-kit .brand-color, .wir-detail .brand-kit .brand-combo,
.wir-detail .brand-kit .brand-font, .wir-detail .brand-kit .brand-doc,
.wir-detail .brand-kit .brand-nav button, .wir-detail .brand-kit .brand-chip,
.wir-detail .brand-kit .brand-bg, .wir-detail .brand-kit .ci-notes { background: var(--surface-2); }
.wir-detail .brand-kit .brand-font-aa { background: var(--surface); }
#viewWir .brand-title h2 { font-weight: 600; }

/* ---- Ordner (Logos, Beispiele, Dateien) ---- */
.brand-tile, .brand-doc { position: relative; }
.brand-folder { margin: 0; min-width: 0; }
.brand-folder-face {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
/* Reiter hinten, Mappe vorn */
.brand-folder-face::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 42%;
    height: 18px;
    border-radius: 9px 9px 0 0;
    background: color-mix(in srgb, var(--client-color, var(--orange)) 34%, var(--surface));
}
.brand-folder-body {
    position: absolute;
    inset: 9px 0 0 0;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    padding: 9px;
    border-radius: 0 10px 10px 10px;
    background: color-mix(in srgb, var(--client-color, var(--orange)) 18%, var(--surface));
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.brand-folder-face:hover .brand-folder-body,
.brand-folder-face:focus-visible .brand-folder-body { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.brand-folder.sort-into .brand-folder-body,
.brand-folder.drop-over .brand-folder-body {
    transform: scale(1.03);
    background: color-mix(in srgb, var(--client-color, var(--orange)) 32%, var(--surface));
    box-shadow: inset 0 0 0 2px var(--client-color, var(--orange));
}
.brand-folder-peek {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    min-height: 0;
}
.brand-folder-peek.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.brand-folder-peek.n2 { grid-template-rows: 1fr; }
.brand-folder-peek.n3 > :first-child { grid-row: span 2; }
.brand-folder-peek .ci-file-preview { aspect-ratio: auto; min-height: 0; border: none; border-radius: 6px; }
.brand-folder-peek .ci-file-preview[data-key] { display: block; }   /* Bild füllt die Zelle */
.brand-folder-peek .ci-file-preview img { padding: 4px; }
.brand-examples .brand-folder-peek .ci-file-preview { background: var(--surface); }
.brand-examples .brand-folder-peek .ci-file-preview img { padding: 0; }
.brand-folder-peek .file-icon .ico { width: 18px; height: 18px; }
.brand-folder-empty { place-self: center; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.brand-folder-name { color: var(--ink); font-weight: 600; }
.brand-folder-name span { color: var(--ink-3); font-weight: 500; margin-left: 2px; font-variant-numeric: tabular-nums; }

/* Kleines Ordnersymbol (Dateiliste, Menü, Leiste) */
.brand-folder-glyph {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 13px;
    margin-top: 3px;
    border-radius: 1px 3px 3px 3px;
    background: color-mix(in srgb, var(--client-color, var(--orange)) 60%, var(--surface));
}
.brand-folder-glyph::before {
    content: '';
    position: absolute;
    left: 0;
    top: -3px;
    width: 8px;
    height: 4px;
    border-radius: 2px 2px 0 0;
    background: inherit;
}

/* Ordner in der Dateiliste */
.brand-kit .brand-doc.brand-folder-row {
    width: 100%;
    padding: 10px 10px 10px 12px;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    background: color-mix(in srgb, var(--client-color, var(--orange)) 14%, var(--surface));
    transition: background 0.15s, box-shadow 0.15s;
}
.brand-kit .brand-doc.brand-folder-row:hover { background: color-mix(in srgb, var(--client-color, var(--orange)) 22%, var(--surface)); }
.brand-kit .brand-doc.brand-folder-row.sort-into,
.brand-kit .brand-doc.brand-folder-row.drop-over {
    background: color-mix(in srgb, var(--client-color, var(--orange)) 32%, var(--surface));
    box-shadow: inset 0 0 0 2px var(--client-color, var(--orange));
}
.brand-folder-row .brand-doc-name { font-weight: 600; }
.brand-folder-go { color: var(--ink-3); font-size: 20px; line-height: 1; padding: 0 4px; }

/* Leiste im geöffneten Ordner */
.brand-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: -2px 0 12px;
    padding: 5px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--client-color, var(--orange)) 14%, var(--surface));
}
.brand-crumb-back {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--surface);
    border: none;
    border-radius: var(--r-pill);
    padding: 6px 12px;
    cursor: pointer;
    transition: color 0.15s, box-shadow 0.15s;
}
.brand-crumb-back:hover { color: var(--ink); }
.brand-crumb-back.sort-into { color: var(--ink); box-shadow: inset 0 0 0 2px var(--client-color, var(--orange)); }
.brand-crumb-sep { color: var(--ink-3); }
.brand-crumb .brand-folder-glyph { margin-top: 2px; }
.brand-crumb-name { font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.brand-crumb-tools { display: flex; gap: 2px; margin-left: auto; }

/* Auswählen */
.brand-selbar {
    padding: 6px 6px 6px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--client-color, var(--orange)) 18%, var(--surface));
}
.brand-selbar h3 { font-size: 14px; }
.brand-sel-hit {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
.brand-sel-box {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 1.5px rgba(35, 36, 37, 0.35);
    color: transparent;
}
.brand-sel-box .ico { width: 14px; height: 14px; }
.brand-doc .brand-sel-box { top: 50%; transform: translateY(-50%); }
.is-sel .brand-sel-box { background: var(--ink); color: var(--surface); box-shadow: none; }
.brand-tile.is-sel .ci-file-preview { box-shadow: 0 0 0 3px var(--ink); }
.brand-doc.is-sel { box-shadow: inset 0 0 0 2px var(--ink); }
.is-selecting .brand-star, .is-selecting .brand-more, .is-selecting .ci-file-dl,
.is-selecting .brand-main-badge, .is-selecting .brand-doc .icon-btn { visibility: hidden; }
.is-selecting .brand-folder, .is-selecting .brand-folder-row { opacity: 0.45; pointer-events: none; }

.brand-menu { max-height: min(70vh, 480px); overflow-y: auto; }
.wir-detail .brand-kit .brand-crumb-back { background: var(--surface-2); }

@media (max-width: 720px) {
    .brand-kit { padding: 14px; }
    .brand-body { grid-template-columns: 1fr; }
    .brand-sec[data-brand-sec="doc"], .brand-sec[data-brand-sec="notes"] { grid-column: 1 / -1; }
    .brand-logos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .brand-examples { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .brand-font-aa { width: 52px; height: 52px; font-size: 26px; }
    .brand-font-sample { font-size: 18px; }
}