/* Changelog 2026-09-23: Guide-Kommentarbuttons kompakter und exklusive Desktop-/Tablet-Mobile-CTAs am vorhandenen 900px-Guide-Breakpoint gestaltet. */
/* Changelog 2026-09-23: Gemeinsame Community-UI aus Airfryer-CSS extrahiert; Guide-spezifischen Rahmen ergaenzt. */
/* =========================
   SHARED COMMUNITY UI
========================= */

.afg-community {
    scroll-margin-top: 1rem;
}

.afg-community__heading,
.afg-community-comments__head,
.afg-community-comment__header,
.afg-community-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
}

.afg-community__heading {
    margin-bottom: 1rem;
}

.afg-community__heading h2,
.afg-community-subheading h3,
.afg-community-rating-grid h3,
.afg-community-comments h3 {
    margin: 0;
}

.afg-community__kicker {
    display: block;
    margin-bottom: .18rem;
    color: var(--device-accent-hover);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.afg-community__pilot-badge {
    flex: 0 0 auto;
    padding: .36rem .62rem;
    border: 1px solid var(--device-border-strong);
    border-radius: 999px;
    color: #dcecff;
    background: #102641;
    font-size: .75rem;
    font-weight: 750;
}

.afg-community-rating-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 1rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--device-border);
}

.afg-community-rating-summary,
.afg-community-own-rating {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--device-border);
    border-radius: 11px;
    background: var(--device-panel-2);
}

.afg-community-rating-summary__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .25em;
    margin: .75rem 0 .1rem;
    color: #fff;
    font-size: clamp(2.35rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
}

.afg-community-rating-summary__value span {
    line-height: 1;
}

.afg-community-rating-summary__count,
.afg-community-rating-summary__empty,
.afg-community-muted,
.afg-community-subheading p,
.afg-community-form-footer small,
.afg-community-rating-description,
.afg-community-comments__head span,
.afg-community-empty {
    color: var(--device-muted);
}

.afg-community-rating-summary__empty {
    margin: .75rem 0 0;
    font-weight: 700;
}

.afg-community-rating-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-top: .7rem;
}

.afg-community-rating-fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.afg-community-rating-options {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .16rem;
}

.afg-community-rating-boxes {
    display: inline-flex;
    gap: .16rem;
}

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

.afg-community-rating-option {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--rating-border-muted, transparent);
    border-radius: 8px;
    opacity: .38;
    cursor: pointer;
    font-size: 1.45rem;
    line-height: 1;
    transition: opacity .14s ease, background-color .14s ease, border-color .14s ease;
}

.afg-community-rating-input:checked ~ .afg-community-rating-option,
.afg-community-rating-option.is-preview,
.afg-community-rating-option.is-selected,
.afg-community-rating-option.is-active {
    border-color: var(--rating-border);
    opacity: 1;
    background: var(--rating-background);
}

.afg-community-rating-option--1,
.afg-community-rating-option--2 {
    --rating-border: #ff7272;
    --rating-border-muted: rgba(255, 114, 114, .38);
    --rating-background: #35191d;
}

.afg-community-rating-option--3,
.afg-community-rating-option--4 {
    --rating-border: #ffb84d;
    --rating-border-muted: rgba(255, 184, 77, .38);
    --rating-background: #352716;
}

.afg-community-rating-option--5,
.afg-community-rating-option--6 {
    --rating-border: #72d572;
    --rating-border-muted: rgba(114, 213, 114, .38);
    --rating-background: #17321f;
}

.afg-community-rating-static {
    margin-top: .7rem;
}

.afg-community-rating-static .afg-community-rating-option {
    cursor: default;
}

.afg-community-rating-input:focus-visible + .afg-community-rating-option {
    outline: 3px solid rgba(var(--device-accent-rgb), .35);
    outline-offset: 2px;
}

.afg-community-rating-description {
    min-height: 1.25rem;
    margin: .35rem 0 0;
    font-size: .82rem;
}

.afg-community-inline-form {
    display: inline-flex;
    margin-top: .6rem;
}

.afg-community-link-button {
    padding: 0;
    border: 0;
    color: #9ecbff;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .16em;
}

.afg-community-link-button:hover,
.afg-community-link-button:focus-visible,
.afg-community-link-button.is-danger {
    color: #ff9b9b;
}

.afg-community-comment-editor,
.afg-community-comments {
    padding-top: 1.2rem;
}

.afg-community-comment-editor {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--device-border);
    scroll-margin-top: 1rem;
}

.afg-community-comment-editor.is-js-collapsed {
    display: none;
}

.afg-community-subheading {
    margin-bottom: .8rem;
}

.afg-community-subheading p {
    margin: .25rem 0 0;
}

.afg-community-avatar-notice {
    padding: .85rem;
    margin: 0;
    border-left: 3px solid var(--device-accent);
    color: #dbe8f6;
    background: #0a192b;
}

.afg-community-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .85rem;
}

.afg-community-identity {
    margin-bottom: 1rem;
    padding: .9rem 0 1rem;
    border-top: 1px solid var(--device-border);
    border-bottom: 1px solid var(--device-border);
}

.afg-community-current-avatar {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .65rem;
}

.afg-community-current-avatar__visual {
    display: inline-flex;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--device-border-strong);
    border-radius: 50%;
    background: #132842;
    font-size: 1.7rem;
    overflow: hidden;
}

.afg-community-current-avatar__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.afg-community-current-avatar small,
.afg-community-current-avatar strong {
    display: block;
}

.afg-community-current-avatar small,
.afg-community-identity-notice {
    color: var(--device-muted);
}

.afg-community-avatar-picker summary {
    width: max-content;
    color: #9ecbff;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: .16em;
}

.afg-community-avatar-picker summary:focus-visible {
    outline: 3px solid rgba(var(--device-accent-rgb), .35);
    outline-offset: 3px;
}

.afg-community-avatar-prompt {
    margin: 0 0 .75rem;
    color: #eaf3fd;
    font-weight: 750;
}

.afg-community-avatar-form {
    margin-top: .8rem;
}

.afg-community-avatar-form fieldset {
    min-width: 0;
    padding: 0;
    margin: 0 0 .8rem;
    border: 0;
}

.afg-community-avatar-form legend {
    margin-bottom: .55rem;
    color: #eaf3fd;
    font-weight: 750;
}

.afg-community-avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    gap: .55rem;
}

.afg-community-avatar-option {
    position: relative;
    display: grid;
    min-height: 96px;
    padding: .55rem;
    align-content: center;
    justify-items: center;
    gap: .3rem;
    border: 1px solid var(--device-border);
    border-radius: 9px;
    color: #edf6ff;
    background: var(--device-panel-2);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 750;
    text-align: center;
}

.afg-community-avatar-option:has(input:checked) {
    border-color: var(--device-accent);
    background: #102d4b;
}

.afg-community-avatar-option:has(input:focus-visible) {
    outline: 3px solid rgba(var(--device-accent-rgb), .35);
    outline-offset: 2px;
}

.afg-community-avatar-option input {
    position: absolute;
    top: .42rem;
    right: .42rem;
}

.afg-community-avatar-option__visual {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.afg-community-avatar-option__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.afg-community-identity-notice {
    width: 100%;
    max-width: none;
    margin: .8rem 0 0;
    font-size: .82rem;
    line-height: 1.5;
}

.afg-community-comment-form label {
    display: block;
    margin-bottom: .38rem;
    color: #eaf3fd;
    font-weight: 750;
}

.afg-community-comment-form textarea {
    width: 100%;
    min-height: 8rem;
    resize: vertical;
    padding: .8rem;
    border: 1px solid var(--device-border-strong);
    border-radius: 9px;
    color: var(--device-text);
    background: var(--device-field);
    font: inherit;
    line-height: 1.55;
}

.afg-community-emoji-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .55rem;
    color: var(--device-muted);
    font-size: .82rem;
}

.afg-community-emoji-bar button {
    display: inline-flex;
    width: 2.15rem;
    height: 2.15rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--device-border);
    border-radius: 7px;
    color: var(--device-text);
    background: var(--device-panel-2);
    cursor: pointer;
    font-size: 1.15rem;
}

.afg-community-emoji-bar button:hover,
.afg-community-emoji-bar button:focus-visible {
    border-color: var(--device-accent);
    background: #102d4b;
}

.afg-community-form-footer {
    align-items: center;
    margin-top: .65rem;
}

.afg-community-form-footer small {
    max-width: none;
    line-height: 1.45;
    white-space: nowrap;
}

.afg-community-form-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.afg-community-comment-delete-form {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--device-border);
}

.afg-community-form-actions .afg-community-comment-delete-form {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.afg-community-comment-editor.is-delete-intent .afg-community-form-actions .afg-community-comment-delete-form {
    display: flex;
}

.afg-device-button--danger {
    border-color: rgba(255, 114, 114, .65);
    color: #fff;
    background: #7c252b;
}

.afg-device-button--danger:hover,
.afg-device-button--danger:focus-visible {
    border-color: #ff9b9b;
    background: #963038;
}

.afg-community-comments__head {
    margin-bottom: .2rem;
}

.afg-community-comment-list {
    margin-top: .45rem;
}

.afg-community-comment {
    padding: 1rem 0;
    border-bottom: 1px solid var(--device-border);
}

.afg-community-comment:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.afg-community-comment__header {
    align-items: flex-start;
}

.afg-community-comment__identity {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    color: #edf6ff;
}

.afg-community-comment__identity strong {
    overflow-wrap: anywhere;
}

.afg-community-comment__avatar {
    display: inline-flex;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--device-border);
    border-radius: 50%;
    background: #132842;
    font-size: 1.55rem;
    overflow: hidden;
}

.afg-community-comment__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.afg-community-comment__meta {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem .6rem;
    color: var(--device-muted);
    font-size: .78rem;
}

.afg-community-comment__text {
    margin: .75rem 0 0 3.4rem;
    color: #dce8f5;
    line-height: 1.62;
    overflow-wrap: anywhere;
}

.afg-community-comment__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin: .6rem 0 0 3.4rem;
    font-size: .86rem;
    font-weight: 700;
}

.afg-community-comment__owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.afg-community-comment__report {
    margin-left: auto;
    text-align: right;
}

.afg-community-comment__report summary {
    color: #9ecbff;
    cursor: pointer;
    font-weight: 700;
    list-style-position: inside;
}

.afg-community-report-form {
    display: grid;
    width: min(28rem, calc(100vw - 3rem));
    gap: .45rem;
    margin-top: .65rem;
    padding: .8rem;
    border: 1px solid var(--device-border);
    border-radius: 9px;
    background: var(--device-field);
    text-align: left;
}

.afg-community-report-form label {
    color: #eaf3fd;
    font-size: .82rem;
    font-weight: 700;
}

.afg-community-report-form select,
.afg-community-report-form textarea {
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid var(--device-border-strong);
    border-radius: 7px;
    color: var(--device-text);
    background: #071424;
    font: inherit;
}

.afg-community-report-form textarea {
    resize: vertical;
}

.afg-community-comment__actions form {
    margin: 0;
}

.afg-community-empty {
    margin: .8rem 0 0;
}

@media (max-width: 760px) {
    .afg-community__heading,
    .afg-community-form-footer,
    .afg-community-comment__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .afg-community-rating-grid {
        grid-template-columns: 1fr;
    }

    .afg-community-rating-form,
    .afg-community-rating-form > .afg-device-button {
        width: 100%;
    }

    .afg-community-auth-actions,
    .afg-community-auth-actions .afg-device-button,
    .afg-community-avatar-form > .afg-device-button {
        width: 100%;
    }

    .afg-community-avatar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .afg-community-comment__meta {
        justify-content: flex-start;
        margin-left: 3.4rem;
    }

    .afg-community-comment__text,
    .afg-community-comment__actions {
        margin-left: 0;
    }

    .afg-community-comment__actions {
        align-items: flex-start;
    }

    .afg-community-form-footer small {
        white-space: normal;
    }

    .afg-community-form-actions,
    .afg-community-form-actions .afg-device-button {
        width: 100%;
    }

    .afg-community-form-actions .afg-community-comment-delete-form {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .afg-community-avatar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Guide: vorhandene flache Farbwelt und eigenstaendige Bedienelemente. */
.afg-guide-community {
    --device-text: #f3f7fc;
    --device-muted: #9aabc0;
    --device-border: rgba(148, 163, 184, .20);
    --device-border-strong: rgba(99, 163, 255, .42);
    --device-panel-2: #10233d;
    --device-field: #071424;
    --device-accent: #3d91ff;
    --device-accent-hover: #7db8ff;
    --device-accent-rgb: 61, 145, 255;
    --device-danger: #ff7272;
    margin-top: 1.5rem;
    padding: clamp(1.1rem, 2vw, 1.75rem);
    background: #0d1c32;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 1rem;
    color: #f3f7fc;
}
.afg-guide-community .afg-community__pilot-badge { color: #dcecff; background: #102641; }
.afg-guide-community .afg-device-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    border: 1px solid #3d91ff;
    border-radius: .65rem;
    padding: .42rem .8rem;
    background: #3d91ff;
    color: #071424;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}
.afg-guide-community .afg-device-button:hover,
.afg-guide-community .afg-device-button:focus-visible { background: #7db8ff; color: #071424; }
.afg-guide-community .afg-device-button--secondary { background: transparent; color: #9ecbff; }
.afg-guide-community .afg-device-button--secondary:hover,
.afg-guide-community .afg-device-button--secondary:focus-visible { background: #102641; color: #dcecff; }
.afg-guide-community .afg-device-button--danger { background: transparent; border-color: #ff7272; color: #ff7272; }
.afg-guide-community .afg-device-button--danger:hover,
.afg-guide-community .afg-device-button--danger:focus-visible { background: #602126; color: #fff; }
.afg-guide-community .afg-device-alert { margin: 1rem 0; padding: .75rem 1rem; border-radius: .6rem; }
.afg-guide-community .afg-device-alert--saved { background: #163827; color: #c3f0ce; }
.afg-guide-community .afg-device-alert--error { background: #4a2227; color: #ffdcdf; }
.afg-guide-community .afg-community-form-footer { flex-wrap: wrap; }
.afg-guide-community .afg-community-form-footer small { white-space: normal; }

.afg-guide-comment-cta {
    padding: 1rem;
    background: #0d1c32;
    color: #f3f7fc;
}
.afg-guide-comment-cta h2 {
    margin: 0 0 .45rem;
    color: #fff;
    font-size: 1rem;
}
.afg-guide-comment-cta p {
    margin: 0 0 .8rem;
    color: #b6c6d9;
    font-size: .82rem;
    line-height: 1.5;
}
.afg-guide-comment-cta__link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .42rem .8rem;
    border: 1px solid #3d91ff;
    border-radius: .65rem;
    background: #3d91ff;
    color: #071424;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}
.afg-guide-comment-cta__link:hover,
.afg-guide-comment-cta__link:focus-visible {
    background: #7db8ff;
    color: #071424;
}
.afg-guide-comment-cta__link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}
.afg-guide-comment-cta--early { display: none; }
.afg-guide-comment-cta--sidebar { display: block; }

@media (max-width: 900px) {
    .afg-guide-comment-cta--early {
        display: block;
        margin-bottom: 1rem;
    }
    .afg-guide-comment-cta--sidebar { display: none; }
}