/* ══════════════════════════════════════════════════════════════
   Mischkultur Tabelle – Material Design 3  v2.1.0
   Light + Dark Mode via prefers-color-scheme
   ══════════════════════════════════════════════════════════════ */

/* ── MD3 Light Tokens ─────────────────────────────────────────── */
.mischkultur-container,
.mischkultur-list-container {
    --md-primary:              #2d6a4f;
    --md-on-primary:           #ffffff;
    --md-primary-container:    #b7e4c7;
    --md-on-primary-container: #0a3622;

    --md-secondary:            #6b5e45;
    --md-on-secondary:         #ffffff;
    --md-secondary-container:  #f4e0c4;
    --md-on-secondary-container: #241a08;

    --md-error:                #ba1a1a;
    --md-on-error:             #ffffff;
    --md-error-container:      #ffdad6;
    --md-on-error-container:   #410002;

    --md-surface:              #f8faf8;
    --md-surface-variant:      #dde5dc;
    --md-on-surface:           #191c19;
    --md-on-surface-variant:   #414941;
    --md-surface-container:    #eceeed;
    --md-surface-container-high: #e6e9e6;
    --md-surface-container-highest: #e1e3e1;

    --md-outline:              #717971;
    --md-outline-variant:      #c1c9c0;

    --md-elevation-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.07);
    --md-elevation-2: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.08);
    --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.12);

    --md-shape-xs:   4px;
    --md-shape-sm:   8px;
    --md-shape-md:   12px;
    --md-shape-lg:   16px;
    --md-shape-xl:   28px;
    --md-shape-full: 999px;

    --md-font: 'Google Sans', 'Roboto', system-ui, sans-serif;

    --md-state-hover:   0.08;
    --md-state-pressed: 0.12;

    /* Semantic */
    --cell-gut:      #d8f3dc;
    --cell-schlecht: #fde8e8;
    --list-gut-bg:   #f0faf2;
    --list-bad-bg:   #fdf4f4;

    font-family: var(--md-font);
    font-size: 14px;
    color: var(--md-on-surface);
    position: relative;
}

/* ── MD3 Dark Tokens ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .mischkultur-container,
    .mischkultur-list-container {
        --md-primary:              #74c69d;
        --md-on-primary:           #003920;
        --md-primary-container:    #005231;
        --md-on-primary-container: #91e3b4;

        --md-error:                #ffb4ab;
        --md-on-error:             #690005;
        --md-error-container:      #93000a;
        --md-on-error-container:   #ffdad6;

        --md-surface:              #101410;
        --md-surface-variant:      #3d4a3d;
        --md-on-surface:           #e1e3e0;
        --md-on-surface-variant:   #bec9bd;
        --md-surface-container:    #1d201d;
        --md-surface-container-high: #272b27;
        --md-surface-container-highest: #323532;

        --md-outline:              #889188;
        --md-outline-variant:      #3d4a3d;

        --md-elevation-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.2);
        --md-elevation-2: 0 1px 2px rgba(0,0,0,.35), 0 2px 6px 2px rgba(0,0,0,.25);
        --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.3);

        --cell-gut:      #1a3d26;
        --cell-schlecht: #3d1414;
        --list-gut-bg:   #152b1e;
        --list-bad-bg:   #2a1010;
    }
}

/* ── Toolbar ───────────────────────────────────────────────────── */
.mischkultur-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.mischkultur-hint {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    letter-spacing: .3px;
    margin-left: auto;
}

/* ── MD3 Legend Chips ──────────────────────────────────────────── */
.mischkultur-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: var(--md-shape-full);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface);
    color: var(--md-on-surface-variant);
}
.legend-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-item.gut      { color: var(--md-on-primary-container); border-color: var(--md-primary-container); background: var(--md-primary-container); }
.legend-item.gut::before { background: var(--md-primary); }
.legend-item.schlecht { color: var(--md-on-error-container); border-color: var(--md-error-container); background: var(--md-error-container); }
.legend-item.schlecht::before { background: var(--md-error); }
.legend-item.neutral  { border-color: var(--md-outline-variant); background: var(--md-surface-container); }
.legend-item.neutral::before  { background: var(--md-outline); }

/* ── View Toggle ───────────────────────────────────────────────── */
.mischkultur-view-toggle {
    display: flex;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-full);
    overflow: hidden;
    background: var(--md-surface-container);
}

.mischkultur-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-family: var(--md-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: .3px;
    transition: background .15s, color .15s;
    position: relative;
    white-space: nowrap;
}
.mischkultur-toggle-btn.is-active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-weight: 600;
}
.mischkultur-toggle-btn:not(.is-active):hover {
    background: var(--md-surface-container-high);
}

/* ══════════════════════════════════════════════════════════════
   SUCHFELD (Start-Listenansicht)
   ══════════════════════════════════════════════════════════════ */

.mischkultur-search-wrap {
    padding: 14px 16px 10px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline-variant);
}

.mischkultur-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-full);
    padding: 8px 14px;
    transition: border-color .2s, box-shadow .2s;
}
.mischkultur-search-field:focus-within {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 20%, transparent);
}

.mischkultur-search-icon {
    color: var(--md-on-surface-variant);
    flex-shrink: 0;
}

.mischkultur-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--md-font);
    font-size: 14px;
    color: var(--md-on-surface);
    outline: none;
    min-width: 0;
}
.mischkultur-search-input::placeholder { color: var(--md-on-surface-variant); }
.mischkultur-search-input::-webkit-search-cancel-button { display: none; }

.mischkultur-search-clear {
    background: none;
    border: none;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.mischkultur-search-clear:hover { color: var(--md-error); }

/* ── Sortenliste ───────────────────────────────────────────────── */
.mischkultur-sortenlist {
    display: flex;
    flex-direction: column;
    background: var(--md-surface);
}

.mischkultur-sorten-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--md-outline-variant);
    font-family: var(--md-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--md-on-surface);
    cursor: pointer;
    text-align: left;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: background .15s;
}
.mischkultur-sorten-btn:last-child { border-bottom: none; }
.mischkultur-sorten-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-primary);
    opacity: 0;
    transition: opacity .15s;
}
.mischkultur-sorten-btn:hover::after  { opacity: var(--md-state-hover); }
.mischkultur-sorten-btn:active::after { opacity: var(--md-state-pressed); }
.mischkultur-sorten-btn:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: -3px;
}

.mischkultur-sorten-name { font-weight: 600; }

.mischkultur-sorten-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mischkultur-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--md-shape-full);
    letter-spacing: .2px;
}
.badge-gut      { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.badge-schlecht { background: var(--md-error-container);   color: var(--md-on-error-container); }

/* ══════════════════════════════════════════════════════════════
   DETAIL-LISTENANSICHT
   ══════════════════════════════════════════════════════════════ */

.mischkultur-list-container {
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elevation-1);
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface);
    overflow: hidden;
}

.mischkultur-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--md-primary-container);
    border-bottom: 1px solid var(--md-outline-variant);
}

.mischkultur-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--md-shape-full);
    border: 1px solid var(--md-primary);
    background: transparent;
    color: var(--md-primary);
    font-family: var(--md-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s;
}
.mischkultur-back-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-primary);
    opacity: 0;
    transition: opacity .15s;
}
.mischkultur-back-btn:hover::after  { opacity: var(--md-state-hover); }
.mischkultur-back-btn:hover { box-shadow: var(--md-elevation-1); }

.mischkultur-list-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--md-on-primary-container);
    letter-spacing: -.2px;
}

/* ── Gruppen – Desktop nebeneinander ───────────────────────────── */
.mischkultur-list-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.mischkultur-list-group {
    padding: 16px;
    border-right: 1px solid var(--md-outline-variant);
}
.mischkultur-list-group:last-child { border-right: none; }

.mischkultur-list-gut      { background: var(--list-gut-bg); }
.mischkultur-list-schlecht { background: var(--list-bad-bg); }
.mischkultur-list-neutral  { background: var(--md-surface); }

/* ── Heading (statisch auf Desktop) ───────────────────────────── */
h4.mischkultur-list-heading {
    margin: 0 0 10px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.mischkultur-list-gut      h4.mischkultur-list-heading { color: var(--md-primary); }
.mischkultur-list-schlecht h4.mischkultur-list-heading { color: var(--md-error); }
.mischkultur-list-neutral  h4.mischkultur-list-heading { color: var(--md-on-surface-variant); }

/* ── Akkordeon-Heading (Mobil) ─────────────────────────────────── */
button.mischkultur-list-heading.mischkultur-accordion-btn {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--md-outline-variant);
    padding: 14px 16px;
    margin: 0;
    font-family: var(--md-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
}
.mischkultur-list-gut      button.mischkultur-accordion-btn { color: var(--md-primary); }
.mischkultur-list-schlecht button.mischkultur-accordion-btn { color: var(--md-error); }
.mischkultur-list-neutral  button.mischkultur-accordion-btn { color: var(--md-on-surface-variant); }

.mischkultur-accordion-arrow {
    margin-left: auto;
    font-size: 10px;
    transition: transform .2s;
}

.mischkultur-list-count {
    font-weight: 400;
    font-size: 11px;
    opacity: .65;
    text-transform: none;
    letter-spacing: .2px;
}

/* ── Listeneinträge ────────────────────────────────────────────── */
.mischkultur-list-items {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mischkultur-list-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mischkultur-list-name {
    background: none;
    border: none;
    padding: 6px 10px;
    border-radius: var(--md-shape-sm);
    font-family: var(--md-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    color: var(--md-on-surface);
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: color .15s;
}
.mischkultur-list-name::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--md-shape-sm);
    opacity: 0;
    transition: opacity .15s;
}
.mischkultur-list-gut      .mischkultur-list-name::after { background: var(--md-primary); }
.mischkultur-list-schlecht .mischkultur-list-name::after { background: var(--md-error); }
.mischkultur-list-neutral  .mischkultur-list-name::after { background: var(--md-on-surface); }
.mischkultur-list-name:hover::after  { opacity: var(--md-state-hover); }
.mischkultur-list-name:active::after { opacity: var(--md-state-pressed); }
.mischkultur-list-name:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 1px;
}

.mischkultur-list-notiz {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    font-style: italic;
    padding: 0 10px 4px 10px;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════
   MATRIX-TABELLE
   ══════════════════════════════════════════════════════════════ */

.mischkultur-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elevation-1);
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface);
}

.mischkultur-table {
    border-collapse: collapse;
    background: var(--md-surface);
}

.mischkultur-th-corner {
    background: var(--md-surface-container);
    min-width: 120px;
    position: sticky;
    left: 0;
    z-index: 3;
    border-bottom: 1px solid var(--md-outline-variant);
    border-right: 2px solid var(--md-outline-variant);
}

.mischkultur-row-header,
.mischkultur-col-header {
    background: var(--md-surface-container);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--md-on-surface-variant);
    white-space: nowrap;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--md-outline-variant);
    border-right: 1px solid var(--md-outline-variant);
    cursor: pointer;
    position: relative;
    transition: color .2s;
    user-select: none;
}
.mischkultur-row-header::after,
.mischkultur-col-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-primary);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.mischkultur-row-header:hover::after,
.mischkultur-col-header:hover::after { opacity: var(--md-state-hover); }
.mischkultur-row-header:focus-visible,
.mischkultur-col-header:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: -3px;
}
.mischkultur-row-header {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    border-right: 2px solid var(--md-outline-variant);
}
.mischkultur-col-header .mischkultur-th-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: inline-block;
    max-height: 120px;
    overflow: hidden;
}

.mischkultur-cell {
    width: 38px;
    height: 38px;
    text-align: center;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid var(--md-outline-variant);
    border-right: 1px solid var(--md-outline-variant);
    cursor: default;
    font-size: 16px;
    position: relative;
    transition: transform .15s cubic-bezier(.2,0,0,1);
}
.mischkultur-cell:not(.mischkultur-cell-self):hover {
    transform: scale(1.25);
    z-index: 2;
    box-shadow: var(--md-elevation-2);
    border-radius: var(--md-shape-xs);
}
.mischkultur-cell:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: -3px;
    z-index: 2;
}
.mischkultur-cell-gut      { background: var(--cell-gut); }
.mischkultur-cell-schlecht { background: var(--cell-schlecht); }
.mischkultur-cell-neutral  { background: var(--md-surface); }
.mischkultur-cell-self     { background: var(--md-surface-container-highest); font-size: 13px; }

/* ── Tooltip ───────────────────────────────────────────────────── */
.mischkultur-tooltip {
    position: fixed;
    background: var(--md-surface-container-high);
    border-radius: var(--md-shape-md);
    padding: 12px 16px;
    box-shadow: var(--md-elevation-3);
    pointer-events: none;
    z-index: 99999;
    max-width: 260px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--md-on-surface);
    border: 1px solid var(--md-outline-variant);
}
.mischkultur-tooltip strong { font-size: 14px; font-weight: 600; display: block; margin-bottom: 2px; }
.tooltip-typ {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--md-shape-full);
    margin-bottom: 4px;
}
.tooltip-gut      { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tooltip-schlecht { background: var(--md-error-container);   color: var(--md-on-error-container); }
.tooltip-neutral  { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
.mischkultur-tooltip em { font-size: 12px; color: var(--md-on-surface-variant); font-style: italic; }

/* ── Loading / Error ───────────────────────────────────────────── */
.mischkultur-loading { padding: 32px; text-align: center; color: var(--md-on-surface-variant); }
.mischkultur-error {
    padding: 14px 16px;
    border-radius: var(--md-shape-md);
    background: var(--md-error-container);
    color: var(--md-on-error-container);
    font-size: 14px;
}

/* ── Block Title ───────────────────────────────────────────────── */
.mischkultur-block-title {
    margin: 0 0 14px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--md-primary);
    letter-spacing: -.3px;
}

/* ── Align support ─────────────────────────────────────────────── */
.wp-block-mischkultur-tabelle-tabelle.alignwide,
.wp-block-mischkultur-tabelle-tabelle.alignfull { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE – Mobile (<768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Gruppen untereinander, kein Padding oben (Akkordeon hat eigenes) */
    .mischkultur-list-groups {
        grid-template-columns: 1fr;
    }
    .mischkultur-list-group {
        border-right: none;
        border-bottom: 1px solid var(--md-outline-variant);
        padding: 0;
    }
    .mischkultur-list-group:last-child { border-bottom: none; }

    /* Akkordeon: Liste initial sichtbar, kann eingeklappt werden */
    .mischkultur-list-group.is-accordion .mischkultur-list-items {
        padding: 8px 16px 12px;
        margin: 0;
    }

    /* Kleinere Zellen in Matrix */
    .mischkultur-cell { width: 30px; height: 30px; font-size: 13px; }
    .mischkultur-row-header { font-size: 11px; padding: 6px 8px; min-width: 90px; }

    /* Hint ausblenden */
    .mischkultur-hint { display: none; }

    /* Header kompakter */
    .mischkultur-list-header { padding: 12px 14px; gap: 8px; }
    .mischkultur-list-title  { font-size: 16px; }

    /* Toggle kleiner */
    .mischkultur-toggle-btn { padding: 5px 10px; font-size: 12px; }
}

@media (max-width: 400px) {
    .mischkultur-sorten-badges { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Icons (v2.2.0)
   ══════════════════════════════════════════════════════════════ */

/* Icon in Sortenliste */
.mischkultur-sorten-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    width: 26px;
    display: inline-flex;
    align-items: center;
}

.mischkultur-sorten-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* Icon im Detail-Header */
.mischkultur-title-icon {
    font-size: 24px;
    line-height: 1;
    margin-right: 6px;
    vertical-align: middle;
}

/* Icon in Listeneinträgen */
.mischkultur-item-icon {
    font-size: 15px;
    line-height: 1;
    width: 22px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .85;
}

.mischkultur-list-name {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Icon in Matrix-Zeilenköpfen */
.mischkultur-row-icon {
    font-size: 14px;
    margin-right: 5px;
    opacity: .85;
    vertical-align: middle;
}

/* Icon in Matrix-Spaltenköpfen (vertikal) */
.mischkultur-th-icon {
    display: block;
    font-size: 14px;
    text-align: center;
    margin-bottom: 3px;
    opacity: .85;
}

/* Tooltip Header mit Icons */
.mischkultur-tooltip-header {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.mischkultur-tooltip-plus {
    color: var(--md-on-surface-variant);
    font-weight: 400;
    margin: 0 2px;
}
.mischkultur-tooltip-notiz {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
}