/* ==========================================================================
   AEONWALL - Detailseite (Phase 3.1: Visual Acceptance Polish)
   --------------------------------------------------------------------------
   Jede Regel steht unter .awu-det. Die Klasse sitzt auf dem Wurzelelement der
   Detailseite; ausserhalb davon aendert diese Datei nichts. Die Markenfarbe
   kommt aus css/color.php (--base-h/s/l).

   Aufbau der Flaechen: drei Ebenen.
     1. Seite      - warmes Weiss mit grossen, ruhigen Lavendel-Lichtfeldern
     2. Flaeche    - Pearl Glass: heller Verlauf, innere Lichtkante, getoente
                     Kontur, weicher gefaerbter Schatten
     3. Einsaetze  - Aktionszone, Kaufbereich, Eingaben: einen Hauch tiefer
   ========================================================================== */

.awu-det {
    --d-h: var(--base-h, 256);
    --d-s: var(--base-s, 100%);
    --d-l: var(--base-l, 65%);

    --d-v: hsl(var(--d-h) var(--d-s) var(--d-l));
    --d-v-600: hsl(var(--d-h) calc(var(--d-s) - 12%) calc(var(--d-l) - 16%));
    --d-v-400: hsl(var(--d-h) var(--d-s) calc(var(--d-l) + 12%));
    --d-v-a06: hsl(var(--d-h) var(--d-s) var(--d-l) / 0.06);
    --d-v-a10: hsl(var(--d-h) var(--d-s) var(--d-l) / 0.1);
    --d-v-a16: hsl(var(--d-h) var(--d-s) var(--d-l) / 0.16);
    --d-v-a24: hsl(var(--d-h) var(--d-s) var(--d-l) / 0.24);
    --d-v-a35: hsl(var(--d-h) var(--d-s) var(--d-l) / 0.35);

    --d-ink: #17171f;
    --d-ink-2: #3c3c49;
    --d-muted: #6e6e7e;
    --d-faint: #9d9dac;

    /* Pearl Glass: Verlauf statt Flaechenfarbe, damit die Karte Licht hat. */
    --d-glass: linear-gradient(
        168deg,
        hsl(var(--d-h) 55% 99.6% / 0.97) 0%,
        hsl(var(--d-h) 60% 97.6% / 0.92) 58%,
        hsl(var(--d-h) 65% 96.2% / 0.9) 100%
    );
    --d-glass-solid: hsl(var(--d-h) 45% 99.2%);
    --d-inset: hsl(var(--d-h) 45% 98% / 0.75);
    --d-line: hsl(var(--d-h) var(--d-s) var(--d-l) / 0.16);
    --d-line-soft: hsl(var(--d-h) 32% 91.5%);

    /* Eine Schattenfamilie fuer alles: Lichtkante innen, Kontaktschatten,
       weicher gefaerbter Wurf. Ebenen unterscheiden sich nur in der Staerke. */
    --d-edge: inset 0 1px 0 hsl(0 0% 100% / 0.9);
    --d-shadow:
        var(--d-edge),
        0 1px 2px hsl(var(--d-h) 35% 38% / 0.05),
        0 14px 34px -20px hsl(var(--d-h) 55% 42% / 0.3);
    --d-shadow-lift:
        var(--d-edge),
        0 2px 5px hsl(var(--d-h) 35% 38% / 0.06),
        0 28px 60px -30px hsl(var(--d-h) 60% 42% / 0.42);

    --d-radius: 20px;
    --d-radius-sm: 13px;
    --d-gap: 24px;

    position: relative;
    padding: 30px 0 72px;
    color: var(--d-ink);
    background: #fbfaff;
    isolation: isolate;

    /* Die Lichthoefe treten absichtlich ueber ihre Flaechen hinaus - der
       Hof hinter dem Kopfbereich zum Beispiel um 3 Prozent je Seite. Auf
       der rechten Seite waechst dadurch die scrollbare Breite des
       Dokuments, und die Seite laesst sich am Desktop rund 20 Pixel weit
       ins Leere schieben. `clip` statt `hidden`, damit der klebende
       Kaufblock weiter klebt: `hidden` machte diesen Block zum
       Scrollbehaelter und position: sticky darin wirkungslos. */
    overflow-x: clip;
}

/* Ruhige Lichtfelder. Kraeftiger als zuvor, damit die hellen Flaechen sich
   vom Grund abheben, aber ohne eine einzige harte Kante. */
.awu-det::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(52% 36% at 8% -4%, hsl(var(--d-h) 90% 90% / 0.65), transparent 68%),
        radial-gradient(44% 30% at 96% 2%, hsl(calc(var(--d-h) + 22) 85% 90% / 0.5), transparent 70%),
        radial-gradient(60% 34% at 30% 52%, hsl(var(--d-h) 80% 94% / 0.5), transparent 72%),
        radial-gradient(70% 38% at 78% 100%, hsl(var(--d-h) 75% 93% / 0.55), transparent 74%);
}

.awu-det__wrap {
    width: min(1320px, 100% - 32px);
    margin-inline: auto;
}

/* ------------------------------------------------------------ Flaechen ---- */

.awu-det__pane {
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius);
    background: var(--d-glass);
    box-shadow: var(--d-shadow);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.awu-det__pane--flat { box-shadow: var(--d-edge); }

/* ---------------------------------------------------------- Kopfbereich ---
   Medienbuehne und Informationskarte bilden EINE Komposition: gleiche Hoehe,
   ein gemeinsamer Lichthof dahinter, aufeinander abgestimmte Radien. Die
   Karte fuellt ihre Hoehe - Titelblock waechst, Aktionen sitzen unten -
   dadurch verschwindet die alte Leerflaeche unter der Karte. */

.awu-det__top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--d-gap);
}

/* Der gemeinsame Hof hinter beiden Flaechen verbindet sie sichtbar. */
.awu-det__top::before {
    content: "";
    position: absolute;
    inset: -6% -3% -10% -3%;
    z-index: -1;
    border-radius: 48px;
    background: radial-gradient(58% 70% at 50% 42%, var(--d-v-a16), transparent 74%);
    filter: blur(30px);
    pointer-events: none;
}

/* -------------------------------------------------------------- Medium ---- */

.awu-det__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 380px;
    padding: 18px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius);
    background: var(--d-glass);
    box-shadow: var(--d-shadow-lift);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.awu-det__stage::before {
    content: "";
    position: absolute;
    inset: 10%;
    z-index: 0;
    border-radius: 44px;
    background: radial-gradient(58% 58% at 50% 50%, var(--d-v-a24), transparent 72%);
    filter: blur(30px);
    pointer-events: none;
}

.awu-det__frame {
    position: relative;
    z-index: 1;
    /* Der dunkle Rahmen umschliesst das Medium, statt volle Breite zu ziehen:
       Hochformate stehen sonst zwischen zwei grossen schwarzen Balken. */
    width: fit-content;
    max-width: 100%;
    align-self: center;
    border-radius: 15px;
    overflow: hidden;
    background: #0d0d13;
    box-shadow:
        0 0 0 1px var(--d-v-a35),
        0 24px 52px -30px hsl(var(--d-h) 65% 28% / 0.55);
}

.awu-det__media {
    display: block;
    width: 100%;
    max-height: min(62vh, 640px);
    margin-inline: auto;
    object-fit: contain;
    background: #0d0d13;
}

.awu-det__media--video { max-height: min(62vh, 640px); }

/*
   Der Videorahmen steht, bevor etwas geladen ist.

   width: fit-content oben misst sich am Inhalt, und .awu-det__media misst
   sich mit width: 100% am Rahmen. Bei einem Bild loest sich das ueber die
   natuerliche Groesse der Datei auf. Bei einem Video nicht: dessen
   natuerliche Groesse ist zuerst die des Posters (assets/images/default.png,
   350 x 230) und nach den Metadaten die des Videos (16:9). Der Rahmen ist
   damit zweimal verschieden gross - gemessen 242 x 195, dann 498 x 318, und
   die Kommentarkarte darunter sprang um rund achtzig Pixel.

   Feste Breite loest den Kreis auf. Die Hoehe kommt aus dem
   Seitenverhaeltnis, das die Ansicht je Datei an den Player schreibt.
*/
.awu-det__frame--video {
    width: 100%;
}

/*
   Und der ruhige Zustand darunter, solange noch kein Bild da ist.

   Kein erzeugtes Standbild und keine zweite Datei: ein Verlauf in der
   Markenfarbe, der genau so lange zu sehen ist, bis der Browser das erste
   echte Einzelbild gezeichnet hat. Danach deckt das Video ihn ab.
*/
.awu-det__frame--video {
    background:
        radial-gradient(70% 60% at 50% 40%, hsl(var(--d-h) 60% 24% / 0.55), transparent 70%),
        #0d0d13;
}

.awu-det__frame--video .awu-det__media--video {
    width: 100%;
    height: auto;
    /* Der Player fuellt seinen Kasten; schwarze Balken entstehen innerhalb
       des Videos, nicht als Luecke im Layout. */
    background: transparent;
}

/* ==========================================================================
   Die Flaeche, solange die Ableitung noch rechnet
   ==========================================================================

   Vorher stand hier nichts, und der Bildzweig sprang ein: bei einem Video
   ohne Vorschaubild lud er assets/images/default.png - den grauen
   Vendor-Platzhalter mit dem Bruchsymbol. Der Verkaeufer sah nach dem
   Upload eine leere Flaeche und konnte ihr nicht ansehen, dass gerade
   gerechnet wird.

   Der Kasten traegt dasselbe Seitenverhaeltnis wie der Player danach. Der
   Wechsel zu ready tauscht damit nur den Inhalt aus; das Layout darunter
   bleibt stehen.
*/
.awu-det__prep {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 24px;
    color: #e8e6f5;
    text-align: center;
}

.awu-det__prep-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 34ch;
}

.awu-det__prep-inner > i {
    font-size: 34px;
    color: var(--d-v-500, #452eb8);
    opacity: 0.9;
}

.awu-det__prep--failed .awu-det__prep-inner > i { color: #ff8a95; }

.awu-det__prep-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.awu-det__prep-track {
    width: min(260px, 100%);
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.awu-det__prep-bar {
    display: block;
    height: 100%;
    min-width: 2%;
    border-radius: 999px;
    background: #452eb8;
    transition: width 0.4s ease;
}

/* Wer Bewegung abbestellt hat, bekommt den Sprung statt der Animation. */
@media (prefers-reduced-motion: reduce) {
    .awu-det__prep-bar { transition: none; }
}

.awu-det__prep-note {
    margin: 0;
    font-size: 13px;
    color: #ffb3bb;
    overflow-wrap: anywhere;
}

.awu-det__stage-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--d-line);
    border-radius: 50%;
    background: hsl(var(--d-h) 40% 100% / 0.92);
    color: var(--d-ink-2);
    box-shadow: var(--d-shadow);
    transition: background-color .16s ease, color .16s ease;
}

.awu-det__stage-btn:hover,
.awu-det__stage-btn:focus-visible { background: #fff; color: var(--d-v-600); }

.awu-det__stage-btn--prev { left: 16px; }
.awu-det__stage-btn--next { right: 16px; }
.awu-det__stage-btn--zoom { top: 20px; right: 20px; transform: none; }

.awu-det__origin {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    color: var(--d-muted);
    font-size: 12.5px;
    text-align: center;
}

/* -------------------------------------------------------- Infokarte ------- */

.awu-det__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius);
    background: var(--d-glass);
    box-shadow: var(--d-shadow);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

/* Der Lesemodus verteilt seine Hoehe: der Textblock waechst, die
   Aktionszone bleibt unten angebunden. */
.awu-det__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

/* Der Luftraum der Karte sammelt sich VOR der Aktionszone, nicht mitten im
   Text: Inhalt oben zusammenhaengend, Aktionen unten angebunden. Bei
   Commercial wandert der Kaufbereich mit nach unten und bleibt mit den
   Aktionen eine Gruppe. */
.awu-det__card-body > .awu-det__actions { margin-top: auto; }
.awu-det__card-body > .awu-det__buy { margin-top: auto; }
.awu-det__card-body > .awu-det__buy + .awu-det__actions { margin-top: 10px; }

.awu-det__author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.awu-det__author .awu-det__who { flex: 1 1 130px; }

.awu-det__avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--d-line-soft);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--d-v-a24);
}

.awu-det__who {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.awu-det__name {
    color: var(--d-ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.awu-det__name:hover { color: var(--d-v-600); }

.awu-det__handle {
    color: var(--d-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Genau eine Kennzeichnung, als ruhiges Schmuckstueck. */
.awu-det__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--d-v-a24);
    border-radius: 999px;
    background: linear-gradient(180deg, hsl(var(--d-h) 80% 98% / 0.9), var(--d-v-a06));
    box-shadow: var(--d-edge);
    color: var(--d-v-600);
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
}

.awu-det__status i { font-size: 14px; }

.awu-det__status--sale {
    border-color: hsl(38 90% 52% / 0.35);
    background: linear-gradient(180deg, hsl(42 100% 97%), hsl(38 90% 55% / 0.12));
    color: #96610a;
}

.awu-det__title {
    margin: 0;
    color: var(--d-ink);
    font-size: clamp(23px, 1.9vw, 30px);
    font-weight: 750;
    letter-spacing: -0.022em;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.awu-det__desc {
    margin: 0;
    color: var(--d-ink-2);
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.awu-det__desc a { color: var(--d-v-600); overflow-wrap: anywhere; }

.awu-det__more {
    padding: 0;
    border: 0;
    background: none;
    color: var(--d-v-600);
    font-size: 13.5px;
    font-weight: 600;
}

.awu-det__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.awu-det__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: hsl(var(--d-h) 45% 99.5% / 0.9);
    box-shadow: var(--d-edge);
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.awu-det__tag:hover,
.awu-det__tag:focus-visible {
    border-color: var(--d-v-a35);
    background: var(--d-v-a06);
    color: var(--d-v-600);
}

/* ------------------------------------------------------------ Aktionen ----
   Eine eingelassene Zone statt einer blossen Trennlinie: die vier
   Standardaktionen wohnen sichtbar zusammen. */

.awu-det__actions {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin-top: 8px;
    padding: 5px;
    border: 1px solid var(--d-line-soft);
    border-radius: 15px;
    background: var(--d-inset);
    box-shadow: inset 0 1px 3px hsl(var(--d-h) 40% 60% / 0.09);
}

/* Jede Zelle ist ein zweizeiliges Raster mit fester Icon-Zeile: Zeile 1 das
   Icon, Zeile 2 die Beschriftung - und, wo es sie gibt, die echte Zahl in
   derselben Zeile daneben ("React · 0"). Vorher stapelten React und Comment
   drei Zeilen (Icon, Zahl, Text), Share und Save nur zwei; die Icons sassen
   dadurch 10px versetzt. */
.awu-det__act {
    display: grid;
    flex: 1 1 0;
    /* Beide Zeilen fest: mit Zahl ist die Textzeile sonst um gut 1px hoeher
       als ohne, und die zentrierte Zeilengruppe schiebt das Icon mit. */
    grid-template-rows: 21px 15px;
    grid-template-columns: auto auto;
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: 5px;
    row-gap: 4px;
    min-width: 0;
    min-height: 50px;
    padding: 7px 4px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: var(--d-ink-2);
    font-size: 11.5px;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

/* Ohne Zahl (Share, Save) traegt das Raster nur eine Spalte - sonst wuerde
   der leere zweite Track die Beschriftung um den halben Spaltenabstand
   verschieben. */
.awu-det__act:not(:has(.awu-det__act-count)) { grid-template-columns: auto; }

.awu-det__act i {
    grid-row: 1;
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    /* Feste Box statt Schriftmetrik: die Leiste mischt zwei Icon-Schriften
       (Font Awesome und Line Awesome) mit verschieden hohen Em-Boxen, die
       sonst 2px Versatz erzeugen. */
    height: 21px;
    line-height: 1;
    font-size: 18px;
}

.awu-det__act-label { grid-row: 2; grid-column: 1; white-space: nowrap; }

.awu-det__act .awu-det__act-count {
    grid-row: 2;
    grid-column: 2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Der Mittelpunkt gehoert zur Darstellung, nicht zum Wert: das Skript
   schreibt weiterhin nur die Zahl in das Element. */
.awu-det__act .awu-det__act-count::before {
    content: "\00B7";
    margin-right: 5px;
    color: var(--d-faint);
}

.awu-det__act:hover,
.awu-det__act:focus-visible {
    background: #fff;
    box-shadow: var(--d-shadow);
    color: var(--d-v-600);
}

.awu-det__act.is-on { color: var(--d-v-600); }

.awu-det__act-count { font-size: 12.5px; font-weight: 700; }

.awu-det__act-label { color: var(--d-muted); font-weight: 550; }
.awu-det__act:hover .awu-det__act-label,
.awu-det__act:focus-visible .awu-det__act-label { color: inherit; }

/* Eigentuemer-Aktion: ruhig, aber eindeutig die Haupthandlung der Karte. */
.awu-det__owner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--d-v-a35);
    border-radius: var(--d-radius-sm);
    background: linear-gradient(180deg, hsl(var(--d-h) 70% 99.5%), hsl(var(--d-h) 80% 97.5%));
    box-shadow: var(--d-edge), 0 8px 20px -14px var(--d-v-a35);
    color: var(--d-v-600);
    font-size: 14.5px;
    font-weight: 650;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.awu-det__owner:hover,
.awu-det__owner:focus-visible {
    border-color: var(--d-v);
    background: linear-gradient(180deg, #fff, var(--d-v-a06));
    box-shadow: var(--d-edge), 0 10px 24px -14px var(--d-v-a35);
    color: var(--d-v-600);
}

/* ------------------------------------------------- Commercial-Bereich ----- */

.awu-det__buy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--d-line-soft);
    border-radius: var(--d-radius-sm);
    background: var(--d-inset);
    box-shadow: inset 0 1px 3px hsl(var(--d-h) 40% 60% / 0.08);
}

.awu-det__buy-title {
    margin: 0;
    color: var(--d-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.awu-det__buy .dropdown-menu { max-height: 320px; overflow-y: auto; }

/* ----------------------------------------------------- Dreipunkt-Menue ---- */

/* z-index 600: der Alt-Stil der Seite gibt .navbar-like-count z-index 550,
   womit der Like-Zaehler sonst durch das geoeffnete Menue scheint. */
.awu-det__menu-wrap { position: relative; z-index: 600; margin-left: auto; }

/* Und im Zaehler selbst hat die Alt-Regel innerhalb der Aktionszone nichts
   verloren: kein eigener Stapel, kein Versatz, geerbte Farbe. */
.awu-det .awu-det__act .awu-det__act-count {
    position: static;
    z-index: auto;
    margin-left: 0;
    color: inherit;
    font-size: 12.5px;
}

/*
 * Vierundvierzig, nicht zweiundvierzig.
 *
 * Bei der Live-Abnahme am 04.09.2026 nachgemessen: dieser Knopf kam auf
 * 42 x 42, waehrend die drei Aktionsschaltflaechen daneben 53 hoch sind
 * und die beiden Sortierknoepfe genau 44 treffen. Zwei Pixel, aber sie
 * sind der Unterschied zwischen "trifft" und "trifft meistens" - und
 * hinter diesem Knopf liegen das Melden, das Teilen und das Entfernen.
 *
 * Die Flaeche waechst am Element selbst und nicht ueber ein
 * ::after-Rechteck. Ein solches Rechteck laege ausserhalb des Kastens,
 * den der Fluss kennt - es koennte den Nachbarn ueberlappen, und
 * gemessen wuerde weiter 42. Hier ist die Trefferflaeche der Kasten.
 */
.awu-det__menu-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: var(--d-ink-2);
    transition: background-color .16s ease, border-color .16s ease;
}

.awu-det__menu-btn:hover,
.awu-det__menu-btn[aria-expanded="true"] {
    border-color: var(--d-line);
    background: #fff;
    box-shadow: var(--d-shadow);
    color: var(--d-v-600);
}

.awu-det__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    display: none;
    width: max(250px, 100%);
    max-width: min(320px, calc(100vw - 32px));
    margin: 0;
    padding: 9px;
    border: 1px solid var(--d-line);
    border-radius: 14px;
    background: var(--d-glass-solid);
    box-shadow: var(--d-shadow-lift);
    list-style: none;
}

.awu-det__menu.is-open { display: block; }

.awu-det__menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 10px;
    color: var(--d-muted);
    font-size: 13px;
}

.awu-det__menu-row strong { color: var(--d-ink); font-weight: 620; }

.awu-det__menu-sep {
    height: 1px;
    margin: 7px 2px;
    background: var(--d-line-soft);
}

.awu-det__menu-act {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--d-ink-2);
    font-size: 13.5px;
    font-weight: 550;
    text-align: left;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.awu-det__menu-act:hover,
.awu-det__menu-act:focus-visible { background: var(--d-v-a06); color: var(--d-v-600); }

.awu-det__menu-act--danger { color: #b3261e; }
.awu-det__menu-act--danger:hover,
.awu-det__menu-act--danger:focus-visible {
    background: hsl(2 70% 55% / 0.08);
    color: #8f1d17;
}

/* ------------------------------------------------------- Inline-Edit ------
   Derselbe Karten-Charakter wie der Lesemodus: gleiche Flaeche, gleiche
   Radien, kompakte Felder. Der Kopf benennt den Zustand, die Fusszeile
   buendelt Speichern und Abbrechen. */

.awu-det__edit { display: none; flex: 1 1 auto; flex-direction: column; gap: 13px; }
.awu-det.is-editing .awu-det__edit { display: flex; }
.awu-det.is-editing .awu-det__read { display: none; }

.awu-det__edit-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--d-line-soft);
    color: var(--d-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.awu-det__edit-head i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--d-v-a10);
    color: var(--d-v-600);
    font-size: 15px;
}

.awu-det__edit-hint {
    margin-left: auto;
    color: var(--d-faint);
    font-size: 12px;
    font-weight: 500;
}

.awu-det__field { display: flex; flex-direction: column; gap: 5px; }

.awu-det__label {
    color: var(--d-ink-2);
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .01em;
}

.awu-det__control {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--d-line-soft);
    border-radius: var(--d-radius-sm);
    background: hsl(0 0% 100% / 0.92);
    box-shadow: inset 0 1px 2px hsl(var(--d-h) 40% 60% / 0.06);
    color: var(--d-ink);
    font-size: 14.5px;
    line-height: 1.5;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.awu-det__control:focus {
    border-color: var(--d-v);
    box-shadow: 0 0 0 3px var(--d-v-a10);
    outline: none;
    background: #fff;
}

textarea.awu-det__control { min-height: 104px; resize: vertical; }

.awu-det__counter {
    align-self: flex-end;
    color: var(--d-faint);
    font-size: 11.5px;
}

.awu-det__field .awu-det__label .awu-det__counter { align-self: auto; margin-left: 4px; }

.awu-det__error {
    display: none;
    color: #b3261e;
    font-size: 12.5px;
}

.awu-det__field.has-error .awu-det__error { display: block; }
.awu-det__field.has-error .awu-det__control,
.awu-det__field.has-error .awu-det__chips { border-color: #b3261e; }

/* Tag-Editor */
.awu-det__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 7px;
    border: 1px solid var(--d-line-soft);
    border-radius: var(--d-radius-sm);
    background: hsl(0 0% 100% / 0.92);
    box-shadow: inset 0 1px 2px hsl(var(--d-h) 40% 60% / 0.06);
}

.awu-det__chips:focus-within {
    border-color: var(--d-v);
    box-shadow: 0 0 0 3px var(--d-v-a10);
    background: #fff;
}

.awu-det__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 11px;
    border: 1px solid var(--d-v-a16);
    border-radius: 999px;
    background: var(--d-v-a06);
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 550;
}

.awu-det__chip-x {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--d-muted);
    font-size: 13px;
    line-height: 1;
}

.awu-det__chip-x:hover,
.awu-det__chip-x:focus-visible { background: hsl(2 70% 55% / 0.1); color: #b3261e; }

.awu-det__chip-input {
    flex: 1 1 120px;
    min-width: 110px;
    min-height: 30px;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: var(--d-ink);
    font-size: 14px;
}

.awu-det__chip-input:focus { outline: none; }

/* Medienwechsel: kompakte Zeile statt grosser Leerflaeche. */
.awu-det__swap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 76px;
    padding: 12px 14px;
    border: 1.5px dashed var(--d-line-soft);
    border-radius: var(--d-radius-sm);
    background: var(--d-inset);
    color: var(--d-muted);
    font-size: 13px;
    text-align: center;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.awu-det__swap [data-awu-swap-hint] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.awu-det__swap [data-awu-swap-hint] i { font-size: 19px; color: var(--d-v-400); }

.awu-det__swap.is-dragover {
    border-style: solid;
    border-color: var(--d-v);
    background: var(--d-v-a06);
    box-shadow: inset 0 0 0 3px var(--d-v-a10);
    color: var(--d-v-600);
}

.awu-det__swap-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.awu-det__swap-preview {
    max-width: 40%;
    max-height: 96px;
    border-radius: 9px;
    object-fit: contain;
    box-shadow: 0 0 0 1px var(--d-v-a24);
}

.awu-det__swap-name {
    color: var(--d-ink-2);
    font-weight: 600;
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.awu-det__edit-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--d-line-soft);
}

.awu-det__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--d-radius-sm);
    font-size: 14.5px;
    font-weight: 650;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.awu-det__btn--primary {
    flex: 1 1 auto;
    background: linear-gradient(180deg, var(--d-v-400), var(--d-v));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.35), 0 10px 22px -12px var(--d-v);
    color: #fff;
}

.awu-det__btn--primary:hover,
.awu-det__btn--primary:focus-visible {
    background: linear-gradient(180deg, var(--d-v), var(--d-v-600));
    color: #fff;
}

.awu-det__btn--primary[disabled] { opacity: .6; cursor: not-allowed; }

.awu-det__btn--ghost {
    border-color: var(--d-line);
    background: hsl(var(--d-h) 40% 100% / 0.85);
    box-shadow: var(--d-edge);
    color: var(--d-ink-2);
}

.awu-det__btn--ghost:hover,
.awu-det__btn--ghost:focus-visible { border-color: var(--d-v-a35); color: var(--d-v-600); }

/* ----------------------------------------------------------- Mittelteil ---
   Spaltenverhaeltnis wie oben, damit die Kanten der Bereiche fluchten. Die
   rechte Spalte folgt dem Scrollen, statt eine Leerflaeche zu hinterlassen. */

.awu-det__mid {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--d-gap);
    margin-top: var(--d-gap);
}

.awu-det__aside {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--d-gap);
    min-width: 0;
}

.awu-det__block {
    padding: 22px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius);
    background: var(--d-glass);
    box-shadow: var(--d-shadow);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.awu-det__block + .awu-det__block { margin-top: var(--d-gap); }
.awu-det__aside .awu-det__block + .awu-det__block { margin-top: 0; }

.awu-det__block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.awu-det__block-title {
    margin: 0;
    color: var(--d-ink);
    font-size: 17.5px;
    font-weight: 720;
    letter-spacing: -0.015em;
}

.awu-det__pill {
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--d-v-a10);
    color: var(--d-v-600);
    font-size: 12.5px;
    font-weight: 700;
}

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

.awu-det__sort {
    display: inline-flex;
    margin-left: auto;
    padding: 3px;
    border: 1px solid var(--d-line-soft);
    border-radius: 999px;
    background: var(--d-inset);
    box-shadow: inset 0 1px 2px hsl(var(--d-h) 40% 60% / 0.07);
}

.awu-det__sort-btn {
    min-height: 34px;
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--d-muted);
    font-size: 13px;
    font-weight: 620;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.awu-det__sort-btn[aria-pressed="true"] {
    background: linear-gradient(180deg, var(--d-v-400), var(--d-v));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.3);
    color: #fff;
}

/* Composer: Avatar, Eingabe und Aktionen als eine geschlossene Einheit. */
.awu-det__composer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.awu-det__composer .awu-det__avatar { width: 40px; height: 40px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--d-v-a16); }

.awu-det__composer form { flex: 1 1 auto; min-width: 0; }

.awu-det__composer-box {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--d-line-soft);
    border-radius: 15px;
    background: hsl(0 0% 100% / 0.92);
    box-shadow: inset 0 1px 2px hsl(var(--d-h) 40% 60% / 0.06);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.awu-det__composer-box:focus-within {
    border-color: var(--d-v);
    box-shadow: 0 0 0 3px var(--d-v-a10);
    background: #fff;
}

.awu-det .awu-det__composer-input {
    min-height: 52px;
    max-height: 200px;
    padding: 13px 15px 6px;
    border: 0;
    border-radius: 15px 15px 0 0;
    background: none;
    box-shadow: none;
    resize: vertical;
}

.awu-det .awu-det__composer-input:focus { border: 0; box-shadow: none; }

.awu-det__composer-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 8px;
}

/* assets/css/style.css adressiert beide Knoepfe ueber zwei IDs
   (#add-comment-form #csubmit) und macht den Absenden-Knopf zu blossem Text.
   Diese beiden Regeln stellen die Detailsprache mit hoeherer Spezifitaet
   wieder her, ohne die Theme-Datei anzutasten. */
.awu-det #add-comment-form #csubmit {
    border: 0;
    margin: 0 0 0 auto;   /* auto: der Knopf bleibt rechts in der Werkzeugzeile */
    background: linear-gradient(180deg, var(--d-v-400), var(--d-v));
    color: #fff;
    font-size: 13.5px;
}

.awu-det #add-comment-form #emoji-picker-btn {
    margin: 0;
    font-size: 19px;
}

.awu-det .awu-det__composer-tools .awu-det__composer-emoji {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--d-muted);
    font-size: 19px;
    transition: background-color .16s ease, color .16s ease;
}

.awu-det .awu-det__composer-tools .awu-det__composer-emoji:hover,
.awu-det .awu-det__composer-tools .awu-det__composer-emoji:focus-visible {
    background: var(--d-v-a06);
    color: var(--d-v-600);
}

.awu-det .awu-det__composer-tools .awu-det__composer-send {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 92px;
    min-height: 38px;
    padding: 8px 18px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(180deg, var(--d-v-400), var(--d-v));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.35), 0 8px 18px -10px var(--d-v);
    color: #fff;
    font-size: 13.5px;
}

.awu-det .awu-det__composer-tools .awu-det__composer-send:hover,
.awu-det .awu-det__composer-tools .awu-det__composer-send:focus-visible {
    background: linear-gradient(180deg, var(--d-v), var(--d-v-600));
    color: #fff;
}

.awu-det__emoji {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-sm);
    background: #fff;
    box-shadow: var(--d-shadow-lift);
}

.awu-det__guest {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 15px 17px;
    border: 1px dashed var(--d-line);
    border-radius: var(--d-radius-sm);
    background: var(--d-inset);
    color: var(--d-muted);
    font-size: 14px;
}

.awu-det__guest a { color: var(--d-v-600); font-weight: 650; }

/* --- Der Gespraechsverlauf -------------------------------------------------
   comments.js rendert dieses Markup; gestaltet wird es ausschliesslich hier.
   Struktur je Kommentar: li > .comet-avatar + .we-comment (.coment-head mit
   Name und Text, .comment-content mit Zeit und Aktionen) + ul (Antworten). */

.awu-det .we-comet {
    margin: 0;
    padding: 0;
    list-style: none;
}

.awu-det .we-comet,
.awu-det .we-comet * {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.awu-det .we-comet img { height: auto; }

.awu-det .we-comet > li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px 0 14px;
    border-top: 1px solid var(--d-line-soft);
}

.awu-det .we-comet > li:first-child { border-top: 0; padding-top: 4px; }

/* Meldungszeilen, die comments.js ohne Avatarstruktur einfuegt ("No comments
   yet", Fehlerhinweise), duerfen nicht in die 40px-Avatarspalte fallen. */
.awu-det .we-comet > li:not(:has(.comet-avatar)) {
    display: block;
    padding: 26px 8px;
    color: var(--d-muted);
    font-size: 14px;
    text-align: center;
}

.awu-det .we-comet .comet-avatar { grid-column: 1; }

.awu-det .we-comet .comet-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--d-line-soft);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--d-v-a10);
}

.awu-det .we-comet .we-comment { grid-column: 2; min-width: 0; }

.awu-det .we-comet .coment-head h5 {
    display: inline;
    margin: 0 6px 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.awu-det .we-comet .coment-head h5 a { color: var(--d-ink); text-decoration: none; }
.awu-det .we-comet .coment-head h5 a:hover { color: var(--d-v-600); }

.awu-det .we-comet .coment-head span {
    color: var(--d-ink-2);
    font-size: 14.5px;
    line-height: 1.6;
}

/* Meta-Zeile: Zeit und Aktionen nebeneinander, leise. */
.awu-det .we-comet .comment-content,
.awu-det .we-comet .reply-content {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 5px;
}

.awu-det .we-comet .comment-content p,
.awu-det .we-comet .reply-content p {
    margin: 0;
    color: var(--d-faint);
    font-size: 12px;
}

.awu-det .we-comet .comment-content a,
.awu-det .we-comet .reply-content a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--d-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color .16s ease;
}

.awu-det .we-comet .comment-content a:hover,
.awu-det .we-comet .reply-content a:hover { color: var(--d-v-600); }

.awu-det .we-comet .comment-content a p { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }

.awu-det .we-comet .comment-content .delete-btn:hover,
.awu-det .we-comet .reply-content .delete-reply-btn:hover { color: #b3261e; }

/* Antworten: eine sichtbar eingerueckte Ebene mit feiner Verlaufslinie. */
.awu-det .we-comet ul,
.awu-det .we-comet ol {
    grid-column: 2;
    margin: 12px 0 0;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--d-v-a24);
    list-style: none;
}

.awu-det .we-comet ul li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
    padding: 9px 0;
}

.awu-det .we-comet ul .comet-avatar img {
    width: 30px;
    height: 30px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--d-v-a10);
}

/* Antwort- und Bearbeitungsformulare aus comments.js */
.awu-det .we-comet .reply-form,
.awu-det .we-comet .edit-form,
.awu-det .we-comet .edit-reply-form {
    margin-top: 9px;
}

.awu-det .we-comet .reply-form form,
.awu-det .we-comet .edit-form form,
.awu-det .we-comet .edit-reply-form form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.awu-det .we-comet .reply-form textarea,
.awu-det .we-comet .edit-form textarea,
.awu-det .we-comet .edit-reply-form textarea {
    flex: 1 1 100%;
    min-height: 48px;
    padding: 10px 13px;
    border: 1px solid var(--d-line-soft);
    border-radius: var(--d-radius-sm);
    background: hsl(0 0% 100% / 0.95);
    font-size: 14px;
}

.awu-det .we-comet .reply-form textarea:focus,
.awu-det .we-comet .edit-form textarea:focus,
.awu-det .we-comet .edit-reply-form textarea:focus {
    border-color: var(--d-v);
    box-shadow: 0 0 0 3px var(--d-v-a10);
    outline: none;
}

/* Die Theme-Knoepfe der Formulare in die Detailsprache uebersetzen. Beide
   Knoepfe einer Zeile teilen Hoehe und Ausrichtung; 44px Mindesthoehe haelt
   das Beruehrziel auch auf Mobilgeraeten. */
.awu-det .we-comet .btn.btn--base.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 18px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(180deg, var(--d-v-400), var(--d-v));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.3);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.awu-det .we-comet .btn.btn--base.btn-sm:hover,
.awu-det .we-comet .btn.btn--base.btn-sm:focus-visible {
    background: linear-gradient(180deg, var(--d-v), var(--d-v-600));
    color: #fff;
}

/* Abbrechen: klar lesbarer Ghost-Knopf. assets/css/style.css erzwingt auf
   genau diesen Klassen Bootstrap-Grau per !important (dunkelgraue Schrift
   auf #6c757d); ohne eigenes !important ist diese Regel nicht erreichbar.
   Das sind die einzigen !important-Vorkommen dieser Datei - dokumentiert
   und auf Hintergrund und Kontur der drei Abbruch-Klassen begrenzt. */
.awu-det .we-comet .btn.btn-secondary.btn-sm,
.awu-det .we-comet .cancel-reply,
.awu-det .we-comet .cancel-edit,
.awu-det .we-comet .cancel-edit-reply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid hsl(var(--d-h) 16% 72%) !important;
    border-radius: 11px;
    background: #fff !important;
    color: var(--d-ink);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.awu-det .we-comet .cancel-reply:hover,
.awu-det .we-comet .cancel-edit:hover,
.awu-det .we-comet .cancel-edit-reply:hover {
    border-color: var(--d-v) !important;
    background: var(--d-v-a06) !important;
    color: var(--d-v-600);
}

.awu-det .we-comet .cancel-reply:focus-visible,
.awu-det .we-comet .cancel-edit:focus-visible,
.awu-det .we-comet .cancel-edit-reply:focus-visible {
    border-color: var(--d-v) !important;
    background: #fff !important;
    color: var(--d-v-600);
}

.awu-det .we-comet .cancel-reply:active,
.awu-det .we-comet .cancel-edit:active,
.awu-det .we-comet .cancel-edit-reply:active {
    background: var(--d-v-a10) !important;
    color: var(--d-v-600);
}

.awu-det .we-comet .cancel-reply:disabled,
.awu-det .we-comet .cancel-edit:disabled,
.awu-det .we-comet .cancel-edit-reply:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.awu-det__empty {
    padding: 28px 8px;
    color: var(--d-muted);
    font-size: 14px;
    text-align: center;
}

/* Nachladen: ruhige Pille ueber die volle Breite - auch fuer den Knopf, den
   comments.js selbst erzeugt (#load-more-btn mit Theme-Klassen). */
.awu-det__loadmore,
.awu-det .we-comet #load-more-btn {
    display: inline-block;
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-sm);
    background: hsl(var(--d-h) 40% 100% / 0.85);
    box-shadow: var(--d-edge);
    color: var(--d-ink-2);
    font-size: 13.5px;
    font-weight: 650;
    text-align: center;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.awu-det__loadmore:hover,
.awu-det__loadmore:focus-visible,
.awu-det .we-comet #load-more-btn:hover,
.awu-det .we-comet #load-more-btn:focus-visible {
    border-color: var(--d-v-a35);
    background: var(--d-v-a06);
    color: var(--d-v-600);
}

.awu-det .we-comet #load-more-container { padding: 6px 0 0; border-top: 0; display: block; }

/* ------------------------------------------------------------- Creator ---- */

.awu-det__creator {
    display: flex;
    align-items: center;
    gap: 13px;
}

.awu-det__creator .awu-det__avatar { width: 56px; height: 56px; }

.awu-det__creator-actions { margin-left: auto; }

/* Kennzahlen als eingelassene Zeile statt loser Zahlen. */
.awu-det__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.awu-det__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 6px;
    border: 1px solid var(--d-line-soft);
    border-radius: 12px;
    background: var(--d-inset);
    color: var(--d-muted);
    font-size: 11.5px;
    font-weight: 550;
    text-align: center;
}

.awu-det__stat strong {
    color: var(--d-ink);
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -0.02em;
}

/* Uebergang "About" -> "More from this creator" innerhalb einer Karte. */
.awu-det__creator-more {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--d-line-soft);
}

.awu-det__creator-more .awu-det__block-head { margin-bottom: 12px; }
.awu-det__creator-more .awu-det__block-title { font-size: 15px; }

/* ------------------------------------------- Kartenreihen (Creator/Related) */

.awu-det__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.awu-det__related .awu-det__cards {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 16px;
}

.awu-det__card-item {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: var(--d-line-soft);
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--d-line), 0 6px 16px -10px hsl(var(--d-h) 50% 40% / 0.25);
    transition: transform .18s ease, box-shadow .18s ease;
}

.awu-det__card-item:hover,
.awu-det__card-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--d-v-a35), var(--d-shadow-lift);
}

.awu-det__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.awu-det__card-item:hover .awu-det__card-img { transform: scale(1.035); }

.awu-det__card-foot {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 30px 12px 10px;
    background: linear-gradient(180deg, transparent, hsl(258 35% 8% / 0.78));
    color: #fff;
    font-size: 12px;
}

.awu-det__card-title {
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.awu-det__card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.awu-det__card-owner {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .92;
}

.awu-det__card-owner img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.awu-det__card-likes { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 650; }
.awu-det__card-likes i { color: #ff5470; }

.awu-det__all {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 12px 4px 0;
    border-top: 1px solid var(--d-line-soft);
    color: var(--d-ink-2);
    font-size: 13.5px;
    font-weight: 650;
    text-decoration: none;
    transition: color .16s ease;
}

.awu-det__all:hover, .awu-det__all:focus-visible { color: var(--d-v-600); }

.awu-det__related { margin-top: var(--d-gap); }

/* --------------------------------------------------------- Fokus/Motion --- */

.awu-det :focus-visible {
    outline: 2px solid var(--d-v);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .awu-det *,
    .awu-det *::before,
    .awu-det *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .awu-det__card-item:hover { transform: none; }
    .awu-det__card-item:hover .awu-det__card-img { transform: none; }
}

/* ------------------------------------------------------------- Schmaler --- */

@media (max-width: 1199.98px) {
    .awu-det__top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    .awu-det__top,
    .awu-det__mid { grid-template-columns: minmax(0, 1fr); }

    .awu-det__top::before { inset: -4%; }
    .awu-det__stage { min-height: 0; }
    .awu-det__mid { margin-top: 18px; }
    .awu-det__block + .awu-det__block { margin-top: 18px; }
    .awu-det__aside { position: static; }
    .awu-det__aside { gap: 18px; }
}

@media (max-width: 767.98px) {
    .awu-det {
        padding: 14px 0 calc(44px + env(safe-area-inset-bottom, 0px));
        --d-gap: 15px;
        --d-radius: 17px;
    }

    .awu-det__wrap {
        width: 100%;
        padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
    }

    .awu-det__stage { padding: 9px; }
    .awu-det__media { max-height: 60vh; }

    .awu-det__card { padding: 18px; }
    .awu-det__block { padding: 18px; }

    /* Wie in der freigegebenen Mobilvorschau: die Eigentuemer-Aktion steht
       ueber der Aktionsleiste. */
    .awu-det__owner { order: -1; }

    .awu-det__title { font-size: 22px; }
    .awu-det__desc { font-size: 14.5px; }

    .awu-det__act { min-height: 48px; font-size: 11px; }
    .awu-det__act i { font-size: 17px; }

    /* Empfehlungen als Wischreihe. */
    .awu-det__cards,
    .awu-det__related .awu-det__cards {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 6px;
    }

    .awu-det__card-item {
        flex: 0 0 68%;
        max-width: 300px;
        scroll-snap-align: start;
    }

    .awu-det__stage-btn { width: 42px; height: 42px; }
    .awu-det__stage-btn--prev { left: 8px; }
    .awu-det__stage-btn--next { right: 8px; }

    .awu-det__menu { right: 0; width: min(300px, calc(100vw - 32px)); }

    .awu-det__stats { gap: 6px; }
    .awu-det__creator .awu-det__avatar { width: 48px; height: 48px; }
}

@media (max-width: 400px) {
    /* Sehr schmal: nur Icon und Zahl. Die Zahl rueckt in die erste Spalte
       und verliert ihren Mittelpunkt, damit sie zentriert unter dem Icon
       steht statt um den halben Spaltenabstand versetzt. */
    .awu-det__act-label { display: none; }
    .awu-det__act { grid-template-columns: auto; row-gap: 3px; }
    .awu-det__act .awu-det__act-count { grid-column: 1; }
    .awu-det__act .awu-det__act-count::before { content: ""; margin: 0; }
    .awu-det__sort-btn { padding: 6px 12px; }
}

/* ==========================================================================
   Die Reihenfolge des Beitrags
   ==========================================================================

   Wer etwas gemacht hat, dann was es ist, dann das Werk, dann was andere
   dazu sagen - und erst danach, was es kostet.

   Vorher stand das Medium links und alles andere rechts daneben. Zwei
   Spalten tragen keine Reihenfolge: was oben rechts steht, ist nicht
   "nach" dem, was links daneben liegt, und auf einem schmalen Geraet
   fiel die Komposition ohnehin in eine Spalte - dann aber in der alten,
   falschen Folge.

   Eine Spalte, in der Folge des Markups. Damit stimmt, was man sieht,
   mit dem ueberein, was eine Sprachausgabe vorliest.

   Die Breite ist begrenzt: ein Beitrag, der ueber 1320 Pixel laeuft, ist
   keine Lesespalte mehr. Die Buehne darf breiter bleiben als der Text,
   weil ein Bild von Flaeche lebt und ein Absatz nicht. */

.awu-det__top {
    display: block;
    max-width: 860px;
    margin-inline: auto;
}

.awu-det__top > * + * { margin-block-start: var(--d-gap); }

/* Die drei Textbloecke tragen dieselbe Flaeche wie zuvor die eine Karte. */
.awu-det__ident,
.awu-det__engage,
.awu-det__offer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius);
    background: var(--d-glass);
    box-shadow: var(--d-shadow);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

/*
 * Die Reihenfolge der Flaechen ist auch ihre Stapelordnung.
 *
 * Jede dieser Flaechen traegt backdrop-filter, und das macht sie zu einem
 * eigenen Stapel. Was in ihr liegt, kann deshalb nicht mehr gegen die Flaeche
 * DANEBEN antreten - nur noch gegen ihre eigenen Geschwister. Das Dreipunkt-
 * Menue in der Ident-Flaeche hat z-index 600 und lag trotzdem unter der
 * Medienbuehne: die kommt spaeter im Text, und bei gleichem Rang gewinnt das
 * Spaetere.
 *
 * Vor der Umordnung in 5.0 fiel das nicht auf - Infokarte und Medium standen
 * nebeneinander, und das Menue klappte in keine der beiden hinein. Seit sie
 * untereinander stehen, tut es das.
 *
 * Absteigend, weil ein Menue immer nach unten aufklappt: was oben steht, muss
 * ueber dem liegen, was darunter kommt.
 */
.awu-det__ident  { z-index: 3; }
.awu-det__engage { z-index: 2; }
.awu-det__offer  { z-index: 1; }

/*
 * Beitrag und Gespraech sind eine Sache.
 *
 * Die Beteiligungszone traegt beides: die Knoepfe und darunter die
 * Kommentare. Zwischen ihnen steht eine Linie und kein Abstand - sie
 * gehoeren zusammen, sie sind nicht zwei Karten.
 */
.awu-det__engage > .awu-det__read { gap: 16px; }

.awu-det__engage .awu-det__comments {
    margin-block-start: 4px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--d-line);

    /* Die Kommentare bringen ihre eigene Karte mit; hier sind sie ein
       Abschnitt darin. */
    border-inline: 0;
    border-block-end: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding-inline: 0;
    padding-block-end: 0;
}

/* Die Buehne darf die Lesebreite ueberragen - ein Bild lebt von Flaeche. */
.awu-det__stage {
    max-width: none;
    min-height: 0;
}

/*
 * Der Mittelteil traegt nur noch den Urheberkasten. Ohne die Kommentare
 * daneben braucht er keine zweite Spalte mehr.
 */
.awu-det__mid {
    display: block;
    max-width: 860px;
    margin-inline: auto;
}

.awu-det__related {
    max-width: 1320px;
    margin-inline: auto;
}

/* ==========================================================================
   Ein Werkbeitrag, eine Karte
   ==========================================================================

   Der Kunde hat am 03.09.2026 gemeldet, dass nicht zu erkennen ist, dass die
   Kommentare zu DIESEM Medium gehoeren. Zu Recht: Urheber, Titel, Medium,
   Aktionen und Kommentare standen als vier getrennte Flaechen untereinander,
   jede mit eigenem Rahmen, eigenem Radius und eigenem Schatten. Vier Karten
   sind vier Themen.

   Ab hier ist es eine. Die Huelle traegt die Flaeche, und was darin liegt,
   ist ein Abschnitt: Abstand und - wo eine Zaesur noetig ist - eine dezente
   Linie. Keine verschachtelten Karten, kein zweiter Schatten.

   Was NICHT hier hereingehoert und deshalb daneben stehenbleibt: der Kauf-
   und Lizenzbereich, der Urheberkasten und die weiteren Werke. Die gehoeren
   nicht zum Gespraech ueber dieses Medium.
   ========================================================================== */

/*
 * Die Breite.
 *
 * 860 Pixel waren als Lesespalte gedacht. Fuer einen Absatz stimmt das; ein
 * Querformatvideo stand darin zwischen zwei breiten Leerflaechen, und auf
 * einem 1918 Pixel breiten Bildschirm blieben links und rechts je ueber 500
 * Pixel ungenutzt. 1040 ist moderat mehr - der Beitrag bleibt eine Spalte,
 * die Kommentare bleiben unter dem Medium, und der Text behaelt seinen
 * eigenen Innenabstand.
 */
.awu-det__top,
.awu-det__mid { max-width: min(1040px, 100%); }

.awu-det__post {
    position: relative;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius);
    background: var(--d-glass);

    /* Genau einer, und der dezente. --d-shadow-lift trug die Buehne, als sie
       eine eigene Karte war; zwei Schatten uebereinander sahen wie zwei
       Ebenen aus. */
    box-shadow: var(--d-shadow);

    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);

    /*
     * KEIN overflow: hidden.
     *
     * Das Dreipunkt-Menue im Urheberblock und die Aufloesungsliste im
     * Kaufbereich klappen aus ihrer Zeile heraus. Eine pauschale Beschneidung
     * an der Karte wuerde sie abschneiden - genau der Fehler, der in 5.3
     * schon einmal an der AeonScript-Kachel behoben wurde. Die runden Ecken
     * bringt die Medienflaeche selbst mit.
     */
    isolation: isolate;
}

/*
 * Die Abschnitte darin sind keine Karten mehr.
 *
 * backdrop-filter kommt hier ausdruecklich weg: es macht jedes Element zu
 * einem eigenen Stapel, und dann kann das Menue im Urheberblock nicht mehr
 * gegen die Medienflaeche antreten, sondern nur noch gegen seine eigenen
 * Geschwister. Die Huelle traegt den Filter jetzt allein - damit gilt die
 * Rangfolge weiter unten wieder.
 */
.awu-det__post > .awu-det__ident,
.awu-det__post > .awu-det__stage,
.awu-det__post > .awu-det__engage {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Und der Lichthof der Buehne mit ihm: ein zweiter Hof innerhalb derselben
   Flaeche liest sich als Kante, wo keine ist. */
.awu-det__post > .awu-det__stage::before { content: none; }

/* -------------------------------------------------------- Innere Abstaende */

.awu-det__post > .awu-det__ident {
    gap: 12px;
    padding: 22px 26px 16px;
}

/*
 * Die Medienflaeche darf breiter wirken als der Text.
 *
 * Ein Bild lebt von Flaeche, ein Absatz von einer lesbaren Zeilenlaenge. 10
 * gegen 26 Pixel Innenabstand genuegt fuer den Unterschied und laesst dem
 * Medium seine eigenen Ecken, ohne dass sie am Kartenrand kleben.
 */
.awu-det__post > .awu-det__stage {
    padding: 0 10px;
    min-height: 0;
}

/*
 * Aktionen und Kommentare ruecken an das Medium heran.
 *
 * Vorher lagen zwischen Medium und Aktionsleiste 24 Pixel Kartenabstand und
 * darunter noch einmal 24 zu den Kommentaren. Zusammen war das mehr Luft als
 * Inhalt, und die Kommentare sahen aus wie ein neuer Anfang.
 */
.awu-det__post > .awu-det__engage {
    gap: 10px;
    padding: 12px 26px 20px;
}

.awu-det__post > .awu-det__engage > .awu-det__read { gap: 10px; }

/* Zwischen Aktionsleiste und Gespraech eine Linie, kein Abstand. */
.awu-det__post .awu-det__comments {
    margin-block-start: 0;
    padding-block-start: 12px;
}

/* Das Datum sitzt kompakt unter dem Medium, nicht als eigene Zeile mit Luft. */
.awu-det__post > .awu-det__stage .awu-det__origin {
    margin-block-start: 8px;
    margin-block-end: 0;
}

/* Klarer Abstand nach draussen - der Kaufbereich ist eine eigene Sache. */
.awu-det__top > .awu-det__post + * { margin-block-start: 28px; }

/*
 * Ein leerer Kaufbereich verschwindet.
 *
 * Bei einem geteilten Werk gibt es nichts zu kaufen und nichts zu
 * lizenzieren - der Abschnitt kam trotzdem als leere Karte, 50 Pixel hoch,
 * mit Rahmen und Schatten. Am 03.09.2026 im Schnappschuss gemessen.
 *
 * :has(*) fragt nach Elementkindern; die Leerzeichen aus dem Blade zaehlen
 * nicht mit. Deshalb :not(:has(*)) und nicht :empty - letzteres trifft eine
 * Zeile, die nur einen Zeilenumbruch enthaelt, nicht.
 */
.awu-det__offer:not(:has(*)) { display: none; }

/* ------------------------------------------------- Der Kommentarkopf ------ */

/*
 * Ueberschrift, Anzahl und Sortierung in EINER kompakten Zeile.
 *
 * 16 Pixel unter dem Kopf und 20 unter dem Eingabefeld waren zusammen mehr
 * Abstand als der leere Zustand darunter Inhalt hatte.
 */
.awu-det__post .awu-det__comments .awu-det__block-head {
    margin-bottom: 10px;
    gap: 8px;
}

.awu-det__post .awu-det__comments .awu-det__block-title { font-size: 16px; }

.awu-det__post .awu-det__composer { margin-bottom: 12px; }

/*
 * Der leere Zustand ist eine Zeile, keine Flaeche.
 *
 * comments.js setzt dafuer ein eigenes Merkmal statt der Theme-Klasse py-4:
 * die traegt !important und liess sich von aussen nicht kompakter machen.
 */
.awu-det .we-comet > li.awu-cmt-empty {
    display: block;
    padding: 10px 0 2px;
    border-top: 0;
    color: var(--d-muted);
    font-size: 13.5px;
}

.awu-det .we-comet > li.awu-cmt-empty > p { margin: 0; }

/* Auch das Laden ist ein Zwischenzustand und braucht keine Buehne. */
.awu-det__post .awu-det__empty { padding: 10px 8px; }

/*
 * Der Hinweis fuer Gaeste ist eine kurze Zeile.
 *
 * Als gestrichelter Kasten war er so gross wie ein Eingabefeld und
 * versprach damit etwas, das er nicht ist.
 */
.awu-det__post .awu-det__guest {
    margin: 0 0 4px;
    padding: 8px 0 10px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13.5px;
}

/* Kommentare wachsen mit ihrem eigenen Abstand; keine Mindesthoehe. */
.awu-det__post .coment-area { min-height: 0; }
.awu-det__post .we-comet > li:first-child { border-top: 0; padding-top: 6px; }

/* ------------------------------------------------------------ Bei 375 px -- */

@media (max-width: 767.98px) {
    /* 12-16 Pixel fuer Text und Kommentare, weniger fuer das Medium: so
       nutzt die Karte die Breite und das Medium wirkt breiter als der Text. */
    .awu-det__post > .awu-det__ident  { padding: 16px 14px 12px; }
    .awu-det__post > .awu-det__stage  { padding: 0 6px; }
    .awu-det__post > .awu-det__engage { padding: 10px 14px 16px; }

    .awu-det__post .awu-det__comments .awu-det__block-title { font-size: 15.5px; }

    /* Die Sortierung ist eine Aktionsflaeche und haelt dieselben 44 Pixel
       ein wie die Knoepfe darueber. */
    .awu-det__post .awu-det__sort-btn { min-height: 44px; padding-inline: 14px; }

    /* Der Kopf darf umbrechen, statt die Zeile aufzureissen. */
    .awu-det__post .awu-det__comments .awu-det__sort { margin-left: 0; }

    /*
     * Und die beiden Knoepfe im Eingabefeld halten dieselben 44 Pixel.
     *
     * Bei 375 Pixeln nachgemessen: das Smiley war 38x38, der Absenden-
     * knopf 92x40. Beides traf die Vorgabe nicht.
     */
    .awu-det__post .awu-det__composer-emoji { min-inline-size: 44px; min-block-size: 44px; }
    .awu-det__post .awu-det__composer-tools .awu-det__composer-send { min-block-size: 44px; }
}