/* ============================================================
   262-php-06-comment-thread — Kommentare

   Eine Antwortebene, mehr nicht. Die Antworten hängen an einer
   Linie, statt in einer eigenen Box zu sitzen — so bleibt der
   Zusammenhang lesbar, ohne dass die Seite unruhig wird.
   ============================================================ */

.x262-comments { display: grid; gap: 1.5rem; }

.x262-comments__count {
    margin: 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-soft, #eceae5);
    font-family: var(--font-body, Roboto, sans-serif);
    font-size: var(--fs-h4, 1.0625rem);
    font-weight: var(--w-heading, 500);
    color: var(--text, #14171a);
}

.x262-comments__list { display: grid; gap: 1.75rem; }
.x262-comments__item { display: grid; gap: 1rem; }

/* ---- Ein Kommentar --------------------------------------- */
.x262-comment {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .875rem;
    align-items: start;
}

.x262-comment__avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-tint-2, #E6F2DC);
}
.x262-comment__avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.x262-comment__body { display: grid; gap: .375rem; min-width: 0; }

.x262-comment__head {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .375rem .625rem;
}

.x262-comment__author {
    font: var(--w-heading, 500) var(--fs-small, 1rem)/1.4 var(--font-body, Roboto, sans-serif);
    color: var(--text, #14171a);
    text-decoration: none;
}
.x262-comment__author:hover { color: var(--brand-strong, #15703A); }

.x262-comment__role,
.x262-comment__time {
    font-size: var(--fs-meta, 1rem);
    color: var(--text-muted, #6d7278);
}

.x262-comment__text {
    margin: 0;
    font-size: var(--fs-small, 1rem);
    line-height: 1.6;
    color: var(--text, #14171a);
    max-width: var(--measure);
}

.x262-comment__actions {
    margin: .125rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.x262-comment__action {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: var(--w-body, 400) var(--fs-meta, 1rem) var(--font-body, Roboto, sans-serif);
    color: var(--text-muted, #6d7278);
}
.x262-comment__action:hover { color: var(--brand-strong, #15703A); }

/* ---- Antworten — eine Ebene ------------------------------ */
.x262-comments__replies {
    display: grid;
    gap: 1.25rem;
    margin-left: 1.25rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--border, #dfdbd4);
}

.x262-comment--reply .x262-comment__avatar { width: 30px; height: 30px; }
.x262-comment--reply .x262-comment__text { font-size: var(--fs-meta, 1rem); }

/* ---- Leerzustand ----------------------------------------- */
.x262-comments__empty {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    background: var(--surface-2, #f4f2ee);
    border-radius: var(--radius, 3px);
    color: var(--text-muted, #6d7278);
    font-size: var(--fs-small, 1rem);
}

/* ---- Formular -------------------------------------------- */
.x262-comments__form {
    display: grid;
    gap: .625rem;
    margin-top: 1.5rem;
    padding: 1.125rem 1.25rem 1.25rem;
    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius-lg, 6px);
}

.x262-comments__label {
    font: var(--w-heading, 500) var(--fs-small, 1rem)/1.4 var(--font-body, Roboto, sans-serif);
    color: var(--text, #14171a);
}

.x262-comments__textarea {
    width: 100%;
    min-height: 5rem;
    padding: 9px 11px;
    resize: vertical;
    font: var(--w-body, 400) var(--fs-small, 1rem)/1.5 var(--font-body, Roboto, sans-serif);
    color: var(--text, #14171a);
    background: #fff;
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius, 3px);
}
.x262-comments__textarea:focus {
    outline: 0;
    border-color: var(--brand, #1E8A3B);
    box-shadow: 0 0 0 3px var(--brand-tint, #F3F8ED);
}

.x262-comments__formfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.x262-comments__hint {
    margin: 0;
    font-size: var(--fs-meta, 1rem);
    color: var(--text-muted, #6d7278);
}
.x262-comments__submit {
    padding: 8px 15px;
    font: var(--w-heading, 500) var(--fs-small, 1rem)/1 var(--font-body, Roboto, sans-serif);
    color: #fff;
    background: var(--brand, #1E8A3B);
    border: 1px solid var(--brand, #1E8A3B);
    border-radius: var(--radius, 3px);
    cursor: pointer;
}
.x262-comments__submit:hover {
    background: var(--brand-strong, #15703A);
    border-color: var(--brand-strong, #15703A);
}

@media (max-width: 560px) {
    .x262-comment { grid-template-columns: minmax(0, 1fr); }
    .x262-comment__avatar { display: none; }
    .x262-comments__replies { margin-left: 0; padding-left: 1rem; }
}