.lia-echo {
    --le-primary: var(--primary-color, var(--lia-green-300, #9cbe9c));
    --le-heading-font: var(--secondary-font, Marcellus, serif);
    --le-body-font: var(--primary-font, 'Nunito Sans', sans-serif);
    --le-heading-color: var(--heading-color, #262525);
    --le-text-color: var(--font-color, #585656);
    font-family: var(--le-body-font);
    color: var(--le-text-color);
}
.lia-echo-toggle-btn {
    display: inline-block; cursor: pointer; list-style: none;
    background: var(--le-primary); color: #fff; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; font-size: 0.8em; padding: 14px 30px;
    border: 1px solid var(--le-primary); border-radius: 40px; margin-bottom: 1.8em;
    box-shadow: 0 0 10px rgba(0,0,0,.15); transition: all .35s ease;
}
.lia-echo-toggle-btn:hover { background: #fff; color: var(--le-primary); }
.lia-echo-toggle-btn::-webkit-details-marker { display: none; }

.lia-echo-form {
    margin: 1em 0 2.5em; max-width: 640px; background: #fff;
    border-radius: 10px; padding: 26px 28px;
    box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.09);
}
.lia-echo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.lia-echo-full { grid-column: 1 / -1; }
.lia-echo-form p { margin-bottom: 1.2em; }
.lia-echo-form label {
    display: block; margin-bottom: 6px; font-family: var(--le-heading-font);
    color: var(--le-heading-color); font-weight: 700; font-size: 1em;
}
.lia-echo-form input, .lia-echo-form textarea {
    width: 100%; box-sizing: border-box; padding: 12px 15px;
    border: 1px solid #e6e6e6; border-radius: 5px;
    font-family: var(--le-body-font); font-size: 0.95em; color: var(--le-text-color);
}
.lia-echo-form input:focus, .lia-echo-form textarea:focus {
    outline: none; border-color: var(--le-primary);
}
.lia-echo-submit-btn {
    background: var(--le-primary); color: #fff; border: 1px solid var(--le-primary);
    border-radius: 40px; padding: 14px 36px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; font-size: 0.8em; cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,.15); transition: all .35s ease;
}
.lia-echo-submit-btn:hover { background: #fff; color: var(--le-primary); }
/* Einwilligung nutzt .lia-consent (Core-DS); Checkbox darf nicht von der
   generischen .lia-echo-form input { width:100% }-Regel erfasst werden, und die
   Zeile bleibt in echo-Textoptik (normal, Body-Font) statt fett/Heading. */
.lia-echo-form .lia-consent { font-weight: 400; font-family: var(--le-body-font); color: var(--le-text-color); }
.lia-echo-form .lia-consent input[type="checkbox"] { width: auto; display: inline-block; margin-right: 8px; vertical-align: middle; }
.lia-echo-hints { color: #999; font-size: 0.82em; line-height: 1.7; }

.lia-echo-count { color: #999; margin: 0.5em 0 1.2em; font-size: 0.9em; }
.lia-echo-pagination { display: flex; justify-content: flex-end; gap: 6px; margin: 1.2em 0; }
.lia-echo-pagination a, .lia-echo-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 6px; border-radius: 50%;
    text-decoration: none; color: var(--le-text-color); font-size: 0.9em;
}
.lia-echo-pagination a:hover { background: color-mix(in srgb, var(--lia-green-300, #9cbe9c) 15%, transparent); }
.lia-echo-pagination .is-current { background: var(--le-primary); color: #fff; font-weight: 700; }

.lia-echo-entries { margin-top: 1em; display: flex; flex-direction: column; gap: 22px; }
.lia-echo-entry {
    padding: 30px 34px; background: #fff; border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.1);
    transform: translateY(0); transition: transform .25s ease, box-shadow .25s ease;
}
.lia-echo-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.14);
}
.lia-echo-entry-meta { margin: 0 0 12px; font-size: 0.88em; color: #999; }
.lia-echo-entry-name {
    font-family: var(--le-heading-font); color: var(--le-heading-color);
    font-size: 1.2em; font-style: normal; margin-right: 6px;
}
.lia-echo-entry-date::before { content: '·'; margin-right: 6px; }
.lia-echo-entry-content { margin: 0; line-height: 1.8; }
.lia-echo-entry-reply {
    margin-top: 16px; padding: 14px 20px; background: color-mix(in srgb, var(--lia-green-300, #9cbe9c) 10%, transparent);
    border-left: 3px solid var(--le-primary); border-radius: 5px;
}
.lia-echo-entry-reply-content { margin: 0; font-size: 0.95em; }

.lia-echo-toolbar { display: block; margin-bottom: 8px; }
.lia-echo-tb-btn {
    background: #fff; border: 1px solid #e6e6e6; border-radius: 5px; cursor: pointer;
    padding: 6px 12px; margin-right: 6px; font-size: 0.85em; color: var(--le-text-color);
}
.lia-echo-tb-btn:hover { border-color: var(--le-primary); color: var(--le-primary); }
.lia-echo-editable {
    width: 100%; box-sizing: border-box; min-height: 120px; padding: 12px 15px;
    border: 1px solid #e6e6e6; border-radius: 5px;
    font-family: var(--le-body-font); font-size: 0.95em; color: var(--le-text-color);
    line-height: 1.6;
}
.lia-echo-editable:focus { outline: none; border-color: var(--le-primary); }
.lia-echo-editable:empty::before {
    content: attr(data-placeholder); color: #aaa;
}
.lia-echo-editable strong { font-weight: 700; }
.lia-echo-editable em { font-style: italic; }
.lia-echo-editable a { color: var(--le-primary); }
@media (max-width: 600px) {
    .lia-echo-grid { grid-template-columns: 1fr; }
}