/*
 * Der Feed der Walls (5.10.44).
 *
 * Eine Wall ist eine grosse Karte: Kopf ueber die ganze Breite, darunter
 * Titelbild und Text nebeneinander, mobil in derselben Reihenfolge untereinander.
 * Bewusst wenige Rahmen und Flaechen; die Werte kommen aus walls.css. Logische
 * Eigenschaften, damit Arabisch ohne eigene Regeln stimmt.
 */

.aw-feed-liste {
    display: grid;
    gap: 24px;
}

.aw-feed {
    min-inline-size: 0;
    padding: 24px;
    border: 1px solid var(--w-linie);
    border-radius: var(--w-radius);
    background: var(--w-flaeche);
    box-shadow: var(--w-schatten);
    scroll-margin-block-start: 96px;
}

/* Unter der eigenen Adresse: dezent hervorgehoben, ohne Animation. */
.aw-feed--fokus {
    border-color: var(--w-v-18);
    box-shadow: 0 0 0 3px var(--w-v-06), var(--w-schatten);
}

/* -------------------------------------------------------------- Kopf */

.aw-feed__kopf {
    display: grid;
    gap: 6px;
    margin-block-end: 18px;
}

.aw-feed__marke {
    margin: 0;
    color: var(--w-v-dunkel);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aw-feed__titel {
    margin: 0;
    color: var(--w-ink);
    font-size: clamp(21px, 2.4vw, 27px);
    font-weight: 700;
    line-height: 1.22;
    overflow-wrap: anywhere;
}

.aw-wall .aw-feed__titel a {
    color: inherit;
    text-decoration: none;
}

.aw-wall .aw-feed__titel a:hover {
    text-decoration: underline;
}

.aw-feed__angaben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0 0 6px;
    color: var(--w-leise);
    font-size: 14px;
    line-height: 1.5;
}

.aw-wall .aw-feed__kategorie {
    color: var(--w-ink-2);
    font-weight: 600;
    text-decoration: none;
}

.aw-wall a.aw-feed__kategorie:hover {
    text-decoration: underline;
}

.aw-feed__angabe::before {
    content: "·";
    margin-inline-end: 8px;
    color: var(--w-leise);
}

.aw-feed__zustand {
    padding: 0 8px;
    border: 1px solid var(--w-linie);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* -------------------------------------------------------------- Rumpf */

.aw-feed__rumpf {
    display: grid;
    gap: 18px;
    min-inline-size: 0;
}

.aw-feed__spalte {
    display: grid;
    align-content: start;
    gap: 16px;
    min-inline-size: 0;
}

/* Das Bild zeigt sich ganz: lieber ruhige Flaeche daneben als ein Beschnitt. */
.aw-feed__medium {
    overflow: hidden;
    border-radius: var(--w-radius-klein);
    background: #f5f3fb;
}

.aw-feed__medium a {
    display: block;
}

.aw-feed__medium img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 560px;
    object-fit: contain;
}

.aw-feed__medium--platzhalter img {
    max-block-size: 300px;
}

.aw-feed__text {
    min-inline-size: 0;
    color: var(--w-ink-2);
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.aw-feed__mehr summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--w-v-dunkel);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.aw-feed__mehr summary::-webkit-details-marker {
    display: none;
}

.aw-feed__mehr-zu,
.aw-feed__mehr[open] .aw-feed__mehr-auf {
    display: none;
}

.aw-feed__mehr[open] .aw-feed__mehr-zu {
    display: inline;
}

/* -------------------------------------------------------- Aktionsleiste */

.aw-feed__aktionen {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding-block: 4px;
    border-block: 1px solid var(--w-linie);
}

.aw-feed__aktion,
.aw-wall a.aw-feed__aktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    inline-size: 100%;
    min-block-size: 44px;
    padding: 4px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--w-ink-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.aw-feed__aktion:hover {
    background: var(--w-v-06);
    color: var(--w-v-dunkel);
}

.aw-feed__aktion svg {
    flex: none;
    inline-size: 20px;
    block-size: 20px;
}

/* ------------------------------------------------------------- Umgebung */

.aw-feed-mehr {
    margin: 24px 0 0;
    text-align: center;
}

.aw-feed-zusatz {
    display: grid;
    gap: 16px;
    margin-block-start: 24px;
}

.aw-feed-zeitstrahl summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--w-v-dunkel);
    font-weight: 650;
    cursor: pointer;
}

.aw-feed-weitere {
    margin-block-start: 40px;
}

.aw-feed-weitere > .aw-wall-block__titel {
    margin-block-end: 16px;
}

@media (min-width: 992px) {
    .aw-feed__rumpf {
        grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
        align-items: start;
        gap: 24px;
    }
}

@media (max-width: 575.98px) {
    .aw-feed {
        padding: 16px;
    }

    .aw-feed__aktion,
    .aw-wall a.aw-feed__aktion {
        flex-direction: column;
        gap: 2px;
        font-size: 11px;
    }
}

/* ---------------------------------------------- Kategorie im Formular */

.aw-katwahl {
    position: relative;
}

.aw-katwahl__knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    inline-size: 100%;
    min-block-size: 48px;
    padding: 8px 16px;
    border: 1px solid var(--w-linie);
    border-radius: var(--w-radius-klein);
    background: var(--w-flaeche);
    color: var(--w-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.aw-katwahl__knopf::after {
    content: "";
    flex: none;
    inline-size: 9px;
    block-size: 9px;
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

.aw-katwahl__knopf--leer {
    color: var(--w-leise);
}

.aw-katwahl__knopf[aria-invalid="true"] {
    border-color: #b42318;
}

.aw-katwahl__grund {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.aw-katwahl__blatt {
    position: absolute;
    inset-inline: 0;
    z-index: 1041;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-block-size: 360px;
    margin-block-start: 4px;
    padding: 12px;
    border: 1px solid var(--w-linie);
    border-radius: var(--w-radius-klein);
    background: var(--w-flaeche);
    box-shadow: 0 18px 40px -18px hsl(var(--w-h) 45% 30% / 0.4);
}

.aw-katwahl__kopf {
    display: flex;
    gap: 8px;
    margin-block-end: 8px;
}

.aw-katwahl__zu {
    flex: none;
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--w-ink-2);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.aw-katwahl__liste {
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.aw-katwahl__option {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.aw-katwahl__option:hover,
.aw-katwahl__option.is-markiert {
    background: var(--w-v-10);
}

.aw-katwahl__option[aria-selected="true"] {
    color: var(--w-v-dunkel);
    font-weight: 650;
}

.aw-katwahl__option[aria-selected="true"]::after {
    content: "✓";
    margin-inline-start: auto;
}

.aw-katwahl__leer {
    margin: 8px 12px;
}

/* ---------------------------------------------- Kategorien im Filter */

.aw-katfilter__suche {
    inline-size: 100%;
    min-block-size: 44px;
    padding: 8px 14px;
    border: 1px solid var(--w-linie);
    border-radius: 10px;
    background: var(--w-flaeche);
    color: var(--w-ink);
    font: inherit;
}

.aw-katfilter__liste {
    max-block-size: 320px;
    margin-block-start: 8px;
    /* Luft zur Leiste: auch eine eingeblendete Leiste (macOS) liegt nie auf einer Zeile. */
    padding-inline-end: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Der Platz der Leiste bleibt, auch wenn die Suche die Liste kuerzt - nichts springt. */
    scrollbar-gutter: stable;
}

/*
 * Die Leiste der Kategorienliste (5.10.45) - nur hier, nie die der Seite.
 *
 * Chromium und Safari ueber ::-webkit-scrollbar: 8 px, Spur kaum getoent,
 * Schieber violett und rund, unter dem Zeiger kraeftiger. Firefox kennt nur
 * scrollbar-width und scrollbar-color; Chromium ab 121 auch, und dann
 * ignoriert es ::-webkit-scrollbar - darum gelten die beiden nur dort, wo es
 * ::-webkit-scrollbar nicht gibt. Am Finger scrollt die Liste wie immer.
 */
.aw-katfilter__liste::-webkit-scrollbar {
    width: 8px;
}

.aw-katfilter__liste::-webkit-scrollbar-track {
    border-radius: 8px;
    background: var(--w-v-06);
}

.aw-katfilter__liste::-webkit-scrollbar-thumb {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--w-v-45) padding-box;
}

.aw-katfilter__liste::-webkit-scrollbar-thumb:hover,
.aw-katfilter__liste::-webkit-scrollbar-thumb:active {
    background: var(--w-v-dunkel) padding-box;
}

@supports not selector(::-webkit-scrollbar) {
    .aw-katfilter__liste {
        scrollbar-width: thin;
        scrollbar-color: var(--w-v-45) var(--w-v-06);
    }

    .aw-katfilter__liste:hover {
        scrollbar-color: var(--w-v-dunkel) var(--w-v-06);
    }
}

.aw-katfilter__buchstabe {
    margin: 10px 4px 2px;
    color: var(--w-leise);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}

.aw-katfilter__gruppe[hidden],
.aw-katfilter__wahl[hidden],
.aw-katwahl__gruppe[hidden],
.aw-katwahl__option[hidden] {
    display: none;
}

.aw-katfilter__wahl {
    display: flex;
    min-block-size: 44px;
    align-items: center;
}

.aw-wall-titelbild {
    display: block;
    inline-size: 240px;
    max-inline-size: 100%;
    block-size: auto;
    margin-block-end: 12px;
    border-radius: var(--w-radius-klein);
    object-fit: cover;
}

.aw-wall-titelbild[hidden] {
    display: none;
}

.aw-wall-knopf--gefahr {
    border-color: #b42318;
    background: #b42318;
}

.aw-wall-knopf--gefahr:hover {
    border-color: #912018;
    background: #912018;
}

@media (max-width: 575.98px) {
    /* Mobil ein Blatt vom unteren Rand, ueber Navigation und Cookie-Hinweis. */
    .aw-katwahl__grund {
        z-index: 1090;
        background: rgb(15 15 25 / 0.45);
    }

    .aw-katwahl__blatt {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: 1091;
        max-block-size: 82dvh;
        block-size: 82dvh;
        margin: 0;
        padding-block-end: calc(12px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }

    .aw-katfilter__liste {
        max-block-size: none;
    }
}

/* ---------------------------------------------------- Rate und Love */

.aw-feed__zelle,
.aw-feed__wahl {
    min-inline-size: 0;
    margin: 0;
}

.aw-feed__wahl > summary {
    list-style: none;
}

.aw-feed__wahl > summary::-webkit-details-marker {
    display: none;
}

.aw-feed__zahl {
    font-variant-numeric: tabular-nums;
    color: var(--w-leise);
    font-weight: 600;
}

.aw-feed__zahl[hidden] {
    display: none;
}

.aw-feed__aktion.is-an {
    color: var(--w-v-dunkel);
}

.aw-feed__aktion[disabled],
.aw-feed__aktion--ruhig {
    color: var(--w-leise);
    cursor: default;
}

.aw-feed__aktion--ruhig:hover,
.aw-feed__aktion[disabled]:hover {
    background: transparent;
    color: var(--w-leise);
}

.aw-feed__sterne {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 5;
    margin-block-start: 4px;
    padding: 12px;
    border: 1px solid var(--w-linie);
    border-radius: var(--w-radius-klein);
    background: var(--w-flaeche);
    box-shadow: 0 14px 30px -18px hsl(var(--w-h) 45% 30% / 0.4);
}

.aw-feed__stand {
    margin: 0 0 4px;
    color: var(--w-leise);
    font-size: 14px;
}

.aw-feed__sterne form {
    margin: 0;
}

.aw-feed__sternreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.aw-feed__stern {
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #c9c6d6;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.aw-feed__stern:hover,
.aw-feed__stern.is-an {
    color: var(--w-v-dunkel);
}

/* --------------------------------------------------------- Kommentare */

.aw-feed__kommentare {
    display: grid;
    gap: 10px;
    min-inline-size: 0;
    scroll-margin-block-start: 96px;
}

.aw-feed__liste {
    display: grid;
    gap: 12px;
    min-inline-size: 0;
}

.aw-fk {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    scroll-margin-block-start: 96px;
}

.aw-fk--verdeckt {
    opacity: .72;
}

.aw-fk--hervor .aw-fk__rumpf {
    outline: 2px solid var(--w-v-18);
    outline-offset: 4px;
    border-radius: 8px;
}

.aw-fk__bild {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.aw-fk__rumpf {
    min-inline-size: 0;
}

.aw-fk__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    color: var(--w-leise);
    font-size: 13px;
}

.aw-wall .aw-fk__kopf a {
    color: var(--w-ink);
    font-weight: 650;
    text-decoration: none;
}

.aw-fk__text {
    color: var(--w-ink-2);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.aw-fk__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    margin-inline-start: -8px;
}

.aw-fk__aktionen form {
    margin: 0;
}

.aw-fk__knopf,
.aw-wall a.aw-fk__knopf {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--w-leise);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.aw-fk__knopf:hover {
    color: var(--w-v-dunkel);
}

.aw-fk__knopf[disabled] {
    cursor: default;
}

.aw-wall a.aw-feed__alle,
.aw-feed__alle {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-block-size: 44px;
    color: var(--w-v-dunkel);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}

.aw-feed__alle[hidden] {
    display: none;
}

.aw-feed__hinweis {
    margin: 0;
    color: var(--w-leise);
    font-size: 14px;
}

.aw-feed__eingabe {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
}

.aw-feed__eingabe textarea {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 44px;
    max-block-size: 160px;
    padding: 10px 14px;
    border: 1px solid var(--w-linie);
    border-radius: 22px;
    background: var(--w-grund);
    color: var(--w-ink);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    resize: none;
}

.aw-feed__senden {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--w-v);
    color: #fff;
    cursor: pointer;
}

.aw-feed__senden:hover {
    background: var(--w-v-dunkel);
}

.aw-feed__senden svg {
    inline-size: 20px;
    block-size: 20px;
}

[dir="rtl"] .aw-feed__senden svg {
    transform: scaleX(-1);
}

/* Die Reaktionen erscheinen mit dem Kommentieren; ohne Skript oeffnet :focus-within. */
.aw-feed__qr {
    display: none;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
}

.aw-feed__kommentare.is-offen .aw-feed__qr,
.aw-feed__kommentare:focus-within .aw-feed__qr {
    display: grid;
}

.aw-feed__qr-knopf {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    min-block-size: 44px;
    padding: 2px 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--w-leise);
    font-size: 18px;
    line-height: 1.1;
    cursor: pointer;
}

.aw-feed__qr-knopf:hover {
    background: var(--w-v-06);
}

.aw-feed__qr-knopf.is-an {
    border-color: var(--w-v);
    background: var(--w-v-10);
}

.aw-feed__qr-zahl {
    font-size: 11px;
    font-weight: 600;
}

.aw-feed__qr-zahl[hidden] {
    display: none;
}

@media (max-width: 375px) {
    /* Bei 320 px nicht acht Spalten unter 44 px: zwei Reihen zu vier. */
    .aw-feed__qr {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Formular und Aufklapper fuellen ihre Zelle wie die Knoepfe daneben. */
.aw-feed__zelle,
.aw-feed__wahl {
    display: grid;
}

/* In der schmalen Spalte neben dem Bild stehen fuenf Zellen samt Zahlen. */
@media (min-width: 576px) {
    .aw-feed__aktion,
    .aw-wall a.aw-feed__aktion {
        gap: 4px;
        font-size: 13px;
    }

    .aw-feed__aktion svg {
        inline-size: 18px;
        block-size: 18px;
    }
}

/* Bei langen Kommentarlisten bleibt das Titelbild neben dem Text stehen. */
@media (min-width: 992px) {
    .aw-feed__medium {
        position: sticky;
        inset-block-start: 96px;
    }
}