/* =====================================================================
   HEMDOMANIA — FEED   feed.css
   ---------------------------------------------------------------------
   Gehoert zu feed.php. Benutzt die Variablen aus hemdo-design.css.
   ===================================================================== */

.fd-body { padding-bottom: 0; }

/* ===== Einrasten beim Scrollen =====================================
   Eine Wischbewegung bringt genau einen Beitrag weiter, egal wie
   kraeftig gewischt wird. Das macht scroll-snap-stop: always.

   Gescrollt wird die Seite selbst, nicht ein Kasten darin — sonst
   entstehen verschachtelte Scrollbereiche, und genau die fuehren zu
   dem Fall, dass man zwei Finger braucht.

   Zu starr? Dann in der naechsten Zeile mandatory durch proximity
   ersetzen: dann rastet es ein, zwingt aber nicht.
   =================================================================== */
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.fd-feed {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--hm-space-4);
    display: grid;
    gap: var(--hm-space-4);
}

/* Ein Beitrag — fuellt die Hoehe des Bildschirms, damit ein
   Einrastpunkt genau einem Video entspricht. */
.fd-post {
    position: relative;
    background: var(--hm-bg-card);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius-lg);
    overflow: hidden;

    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: calc(var(--hm-top-bar-h) + var(--hm-space-2));

    /* Genau ein Bildschirm abzueglich Kopfzeile und Abstand. Die
       tatsaechliche Hoehe der Kopfzeile meldet hm-kopf.js. */
    min-height: calc(100dvh - var(--hm-top-bar-h) - var(--hm-space-5));
    max-height: calc(100dvh - var(--hm-top-bar-h) - var(--hm-space-5));

    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;   /* Buehne oben, Text unten */
}

/* Die Nachschubmarke darf nicht einrasten, sonst haengt der Feed
   am Ende an einer leeren Stelle fest. */
.fd-nachschub { scroll-snap-align: none; }


/* ===== Buehne ====================================================== */

.fd-buehne {
    position: relative;
    background: #000;
    display: grid;
    place-items: center;

    /* Hoch- und Querformat bekommen dieselbe Flaeche, das Video
       fuellt sie nur so weit, wie es ohne Verzerren geht. Ein
       Hochformatvideo wird also NICHT auf Desktopbreite gezogen. */
    min-height: 0;          /* darf schrumpfen, damit der Text unten bleibt */
    overflow: hidden;
}

/* Hoehe und Breite fest auf die Buehne setzen und das Bild darin
   einpassen. Vorher standen hier Prozentwerte fuer max-height — die
   greifen nur, wenn die Hoehe des Elternelements eindeutig feststeht.
   Tat sie das nicht, wurde das Video zu hoch und oben und unten
   abgeschnitten. Genau das passierte im Hochformat. */
.fd-video,
.fd-foto,
.fd-intro-video,
.fd-intro-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;          /* nie beschneiden, notfalls Raender */
    background: #000;
}

/* Grosse unsichtbare Flaeche zum Anhalten mit einem Fingertipp */
.fd-grossflaeche {
    position: absolute; inset: 0;
    background: none; border: 0; padding: 0;
    cursor: pointer;
}

.fd-fortschritt {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
}
.fd-fortschritt span {
    display: block; height: 100%; width: 0;
    background: var(--hm-orange);
    transition: width 200ms linear;
}


/* ===== Aktionen rechts ============================================= */

.fd-seite {
    position: absolute;
    right: var(--hm-space-3);
    bottom: 32%;
    display: grid;
    gap: var(--hm-space-3);
    justify-items: center;
    z-index: 2;
}

.fd-seite .hm-like,
.fd-knopf {
    display: grid; justify-items: center; gap: 2px;
    min-width: 52px; min-height: 52px;
    padding: var(--hm-space-2);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border: 0; border-radius: var(--hm-radius);
    color: #fff; text-decoration: none;
    font-size: var(--hm-size-xs);
    cursor: pointer;
}
.fd-knopf { font-size: 20px; line-height: 1.1; }
.fd-knopf span { font-size: var(--hm-size-xs); }


/* ===== Text unter dem Video ======================================== */

.fd-unten { padding: var(--hm-space-4); display: grid; gap: var(--hm-space-2); }

.fd-autor {
    display: inline-flex; align-items: center; gap: var(--hm-space-2);
    color: var(--hm-text); text-decoration: none;
    font-weight: var(--hm-weight-medium);
    justify-self: start;
}
.fd-autor img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.fd-titel { margin: 0; font-size: var(--hm-size-lg);
            font-weight: var(--hm-weight-medium); }
.fd-text  { margin: 0; color: var(--hm-text-dim); font-size: var(--hm-size-sm); }
.fd-meta  { margin: 0; color: var(--hm-text-faint); font-size: var(--hm-size-xs); }


/* ===== Bedienleiste ================================================ */

.fd-steuerung {
    display: flex; flex-wrap: wrap; gap: var(--hm-space-2);
    margin-top: var(--hm-space-2);
}
.fd-steuerung button {
    min-height: 44px; min-width: 52px;
    padding: 0 var(--hm-space-3);
    background: var(--hm-bg-elevated);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius-pill);
    color: var(--hm-text);
    font: inherit; font-size: var(--hm-size-sm);
    cursor: pointer;
}
.fd-steuerung button:active { transform: scale(0.97); }

@media (max-width: 599px) {
    .fd-feed { padding: var(--hm-space-2); gap: var(--hm-space-3); }
    .fd-post {
        border-radius: var(--hm-radius);
        min-height: calc(100dvh - var(--hm-top-bar-h) - var(--hm-space-4));
        max-height: calc(100dvh - var(--hm-top-bar-h) - var(--hm-space-4));
    }
    /* Text knapp halten, damit ein Beitrag auf einen Bildschirm passt
       und das Einrasten nichts abschneidet. */
    .fd-text {
        display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
    }
    .fd-unten { padding: var(--hm-space-3); gap: var(--hm-space-1); }
}

/* Aeltere Browser ohne dvh: auf vh zurueckfallen */
@supports not (height: 100dvh) {
    .fd-post { min-height: calc(100vh - var(--hm-top-bar-h) - var(--hm-space-6)); }
}

/* Wer Bewegung reduziert haben will, bekommt kein weiches Gleiten */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}


/* ===== Kommentare ==================================================
   Klappt unter dem Beitrag auf. Gelesen und geschrieben wird ueber
   api.php, also ueber dieselben Regeln wie im bestehenden Feed.
   =================================================================== */

/* Blatt, das von unten hochfaehrt. Es liegt ueber der Seite, nicht in
   ihr — deshalb bleibt der Beitrag dahinter unveraendert gross. */
.fd-kommentare {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--hm-z-dialog);

    display: grid;
    gap: var(--hm-space-3);
    align-content: start;

    max-height: 80dvh;
    padding: var(--hm-space-3) var(--hm-space-4)
             calc(var(--hm-space-4) + env(safe-area-inset-bottom));

    background: var(--hm-bg-card);
    border-top: 1px solid var(--hm-border-strong);
    border-radius: var(--hm-radius-lg) var(--hm-radius-lg) 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .6);

    animation: fdBlattHoch 260ms var(--hm-ease);
}
.fd-kommentare[hidden] { display: none; }

@keyframes fdBlattHoch {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (min-width: 900px) {
    /* Auf dem Desktop kein Blatt ueber die volle Breite, sondern
       mittig und begrenzt. */
    .fd-kommentare {
        left: 50%; right: auto;
        transform: translateX(-50%);
        width: min(560px, 92vw);
        border-radius: var(--hm-radius-lg) var(--hm-radius-lg) 0 0;
    }
    @keyframes fdBlattHoch {
        from { transform: translate(-50%, 100%); }
        to   { transform: translate(-50%, 0); }
    }
}

/* Kopfzeile des Blattes */
.fd-komm-kopf {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--hm-space-2);
    padding-bottom: var(--hm-space-2);
    border-bottom: 1px solid var(--hm-border);
}
.fd-komm-kopf h3 {
    margin: 0; grid-column: 1; grid-row: 2;
    font-size: var(--hm-size-base);
    font-weight: var(--hm-weight-medium);
}
.fd-komm-griff {
    grid-column: 1 / -1; grid-row: 1;
    justify-self: center;
    width: 42px; height: 4px;
    border-radius: 999px;
    background: var(--hm-border-strong);
    margin-bottom: var(--hm-space-2);
}
.fd-komm-zu {
    grid-column: 2; grid-row: 2;
    min-width: 44px; min-height: 40px;
    background: none; border: 0;
    color: var(--hm-text-dim);
    font-size: 20px; cursor: pointer;
}
.fd-komm-zu:hover { color: var(--hm-orange); }

.fd-komm-liste {
    display: grid;
    gap: var(--hm-space-3);
    align-content: start;
    max-height: 52dvh;
    overflow-y: auto;
    overscroll-behavior: contain;   /* scrollt den Feed nicht mit weiter */
}

.fd-komm-eintrag {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: var(--hm-space-3);
    align-items: start;
}
.fd-komm-eintrag.ist-admin .fd-komm-name { color: var(--hm-orange); }

.fd-komm-bild {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; background: var(--hm-bg-elevated);
}

.fd-komm-name {
    margin: 0;
    font-size: var(--hm-size-sm);
    font-weight: var(--hm-weight-medium);
}
.fd-komm-name span {
    margin-left: var(--hm-space-2);
    font-weight: var(--hm-weight-normal);
    font-size: var(--hm-size-xs);
    color: var(--hm-text-faint);
}
.fd-komm-text {
    margin: 2px 0 0;
    font-size: var(--hm-size-sm);
    color: var(--hm-text-dim);
    overflow-wrap: anywhere;
}

.fd-komm-laedt,
.fd-komm-leer {
    margin: 0; color: var(--hm-text-faint); font-size: var(--hm-size-sm);
}
.fd-komm-leer a { color: var(--hm-orange); }

.fd-komm-neu { display: grid; gap: var(--hm-space-2); }
.fd-komm-feld { resize: vertical; font-family: inherit; }
.fd-komm-senden { justify-self: start; }
.fd-komm-hinweis {
    margin: 0; font-size: var(--hm-size-sm); color: var(--hm-danger);
}

/* Ein aufgeklappter Kommentarbereich darf hoeher sein als der
   Bildschirm. Solange einer offen ist, wird das Einrasten ganz
   abgeschaltet — sonst springt der Browser beim Aufklappen weiter.
   Die Klassen setzt feed.js; :has() waere hier zu unzuverlaessig. */
html.fd-ohne-snap { scroll-snap-type: none; }

/* Frueher wurde der Beitrag beim Oeffnen kleiner gemacht, damit
   Kommentare darunter passten. Das ist mit dem Blatt nicht mehr noetig —
   der Beitrag bleibt unveraendert. */
.fd-post.zeigt-kommentare { scroll-snap-align: none; }


/* ===== Musik unter einem Foto ======================================
   Zeigt Cover und Titel. Abgespielt wird erst, wenn der Besucher den
   Ton eingeschaltet hat — ungefragter Ton ist ausgeschlossen.
   =================================================================== */

.fd-musik {
    position: absolute;
    left: var(--hm-space-3);
    bottom: var(--hm-space-3);
    display: flex; align-items: center; gap: var(--hm-space-2);
    max-width: 62%;
    padding: var(--hm-space-2) var(--hm-space-3);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    border-radius: var(--hm-radius-pill);
    color: #fff;
    font-size: var(--hm-size-xs);
    z-index: 2;
    pointer-events: none;       /* verdeckt das Tippen aufs Foto nicht */
}
.fd-musik img {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    animation: fdDreht 6s linear infinite;
    animation-play-state: paused;     /* dreht nur bei laufendem Ton */
}

/* Laeuft Ton, dreht sich das Cover. Die Klasse setzt feed.js. */
.fd-post.ist-hoerbar .fd-musik img { animation-play-state: running; }
.fd-musik span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@keyframes fdDreht { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .fd-musik img { animation: none; }
}

/* Textbeitrag ohne Datei */
.fd-text-beitrag {
    display: grid; place-items: center;
    padding: var(--hm-space-7) var(--hm-space-5);
    min-height: 320px;
    background: linear-gradient(140deg, #1a1a1a, #0a0a0a);
}
.fd-text-beitrag p {
    margin: 0; text-align: center;
    font-size: var(--hm-size-xl);
    line-height: var(--hm-leading);
}


/* ===== Antwort auf einen anderen Beitrag ===========================
   Zeigt das Original ueber der Antwort und fuehrt mit einem Tipp
   dorthin. Angelegt werden Antworten weiterhin in camera.php.
   =================================================================== */

.fd-antwort-auf {
    display: flex; align-items: center; gap: var(--hm-space-3);
    padding: var(--hm-space-2) var(--hm-space-3);
    background: var(--hm-bg-elevated);
    border-bottom: 1px solid var(--hm-border);
    color: inherit; text-decoration: none;
}
.fd-antwort-auf img {
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: var(--hm-radius-sm);
    object-fit: cover;
    background: var(--hm-bg-card);
}
.fd-antwort-auf span {
    display: grid; min-width: 0;
}
.fd-antwort-auf strong {
    font-size: var(--hm-size-xs);
    color: var(--hm-orange);
    font-weight: var(--hm-weight-medium);
}
.fd-antwort-auf em {
    font-style: normal;
    font-size: var(--hm-size-sm);
    color: var(--hm-text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ===== Vorspann einer Antwort ======================================
   Liegt ueber der Buehne und verschwindet, sobald der Ausschnitt des
   Originals durch ist.
   =================================================================== */

.fd-intro {
    position: absolute; inset: 0; z-index: 3;
    display: grid; place-items: center;
    background: #000;
    transition: opacity var(--hm-normal);
}
.fd-intro.ist-aus {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Groesse kommt aus der gemeinsamen Regel weiter oben. */

.fd-intro-marke {
    position: absolute; top: var(--hm-space-3); left: var(--hm-space-3);
    padding: var(--hm-space-1) var(--hm-space-3);
    background: rgba(252, 110, 81, 0.9);
    border-radius: var(--hm-radius-pill);
    font-size: var(--hm-size-xs);
    font-weight: var(--hm-weight-medium);
    color: #fff;
}

.fd-intro-weiter {
    position: absolute; right: var(--hm-space-3); bottom: var(--hm-space-3);
    min-height: 40px; padding: 0 var(--hm-space-4);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid var(--hm-border-strong);
    border-radius: var(--hm-radius-pill);
    color: #fff; font: inherit; font-size: var(--hm-size-sm);
    cursor: pointer;
}


/* ===== Desktop: ruhigere Groesse ===================================
   Auf dem Handy soll ein Beitrag den Bildschirm fuellen. Auf grossen
   Bildschirmen wirkt dasselbe riesig: die Spalte ist breiter und die
   Hoehe kaum begrenzt.

   Deshalb ab 900px: schmalere Spalte, Buehne auf knapp zwei Drittel
   der Bildschirmhoehe gedeckelt, und der Beitrag ist nur noch so hoch
   wie noetig. Das Einrasten bleibt, weil es an scroll-snap-align
   haengt und nicht an der Hoehe.
   =================================================================== */

@media (min-width: 900px) {

    .fd-feed {
        max-width: 620px;
        padding: var(--hm-space-5) var(--hm-space-4);
        gap: var(--hm-space-5);
    }

    .fd-post {
        min-height: 0;                 /* nicht mehr bildschirmhoch */
        max-height: none;
    }

    /* Eindeutige Hoehe statt einer Obergrenze — damit die Kinder
       darin ihre 100 % ausrechnen koennen. */
    .fd-buehne { height: 62vh; max-height: none; }

    /* Die Aktionen rutschen mit der kleineren Buehne nach oben */
    .fd-seite { bottom: auto; top: var(--hm-space-4); }

    .fd-titel { font-size: var(--hm-size-base); }
}

/* Sehr grosse Bildschirme: etwas mehr Breite, aber keine Riesenflaeche */
@media (min-width: 1600px) {
    .fd-feed { max-width: 700px; }
    .fd-buehne { height: 66vh; }
}


/* ===== Kurzer Hinweis unten (z. B. "Link kopiert") ================= */

.fd-hinweis {
    position: fixed;
    left: 50%; bottom: calc(var(--hm-space-6) + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: var(--hm-z-toast);
    padding: var(--hm-space-3) var(--hm-space-5);
    background: var(--hm-bg-elevated);
    border: 1px solid var(--hm-border-strong);
    border-radius: var(--hm-radius-pill);
    box-shadow: var(--hm-shadow-lg);
    color: var(--hm-text);
    font-size: var(--hm-size-sm);
    opacity: 1;
    transition: opacity var(--hm-normal);
}
.fd-hinweis.ist-weg { opacity: 0; }


/* Hinweis statt Feed, wenn niemand angemeldet ist */
.fd-sperre {
    display: grid; gap: var(--hm-space-4);
    justify-items: start;
    padding: var(--hm-space-7) var(--hm-space-4);
    background: var(--hm-bg-card);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius-lg);
}
.fd-sperre p { margin: 0; }
.fd-sperre .hm-btn { margin-right: var(--hm-space-2); }


/* ===== Kennzeichnung KI und GEMA =================================== */

.fd-marken {
    margin: 0;
    display: flex; flex-wrap: wrap; gap: var(--hm-space-2);
}

.fd-marke {
    font-size: 11px;
    letter-spacing: .02em;
}

/* KI bleibt im HemdoMania-Orange, GEMA neutral — sonst sehen beide
   gleich wichtig aus, obwohl das eine eine Herkunft und das andere
   eine Rechtslage beschreibt. */
.fd-marke--ki {
    background: var(--hm-orange-soft);
    color: var(--hm-orange);
}
.fd-marke--gema {
    background: rgba(255, 255, 255, .08);
    color: var(--hm-text-dim);
}


/* ===== Countdown nach dem Video ====================================
   Liegt ueber der Buehne, sobald ein Video zu Ende ist. Zaehlt mit den
   vorhandenen Grafiken von 3 auf 1 und geht dann zum naechsten Beitrag.
   =================================================================== */

.fd-zaehler {
    position: absolute; inset: 0; z-index: 5;
    display: grid; place-content: center; justify-items: center;
    gap: var(--hm-space-3);
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}
.fd-zaehler[hidden] { display: none; }

.fd-zaehler__bild {
    width: 120px; height: 120px;
    object-fit: contain;
    animation: fdZaehlPuls 900ms var(--hm-ease);
}

@keyframes fdZaehlPuls {
      0% { transform: scale(.7); opacity: 0; }
     25% { transform: scale(1.06); opacity: 1; }
     40% { transform: scale(1); }
    100% { transform: scale(1); opacity: 1; }
}

.fd-zaehler__text {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--hm-size-sm);
}

.fd-zaehler__stop {
    min-height: 44px;
    padding: 0 var(--hm-space-5);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--hm-border-strong);
    border-radius: var(--hm-radius-pill);
    color: #fff;
    font: inherit; font-size: var(--hm-size-sm);
    cursor: pointer;
}
.fd-zaehler__stop:hover { background: var(--hm-orange); border-color: var(--hm-orange); }

@media (max-width: 599px) {
    .fd-zaehler__bild { width: 96px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-zaehler__bild { animation: none; }
}


/* ===== Aktionen rechts: eigene Symbole, kein Kasten ================
   Der graue Kasten hinter den Knoepfen faellt weg. Damit die Symbole
   ueber hellen Bildstellen trotzdem lesbar bleiben, bekommen sie einen
   weichen Schatten statt einer Flaeche — derselbe Kniff, den Video-Apps
   fuer ihre Bedienelemente benutzen.
   =================================================================== */

.fd-seite .hm-like,
.fd-seite .fd-knopf {
    background: none;
    backdrop-filter: none;
    border: 0;
    padding: var(--hm-space-1);
    min-width: 56px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.fd-knopf__bild,
.fd-seite .hm-like__icon {
    width: 38px; height: 38px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .75));
    transition: transform var(--hm-fast);
}

.fd-seite .hm-like:active .hm-like__icon,
.fd-seite .fd-knopf:active .fd-knopf__bild { transform: scale(0.88); }

/* Beschriftung und Zahlen darunter */
.fd-seite .fd-knopf span,
.fd-seite .hm-like__count {
    font-size: 11px;
    font-weight: var(--hm-weight-medium);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}

/* Das gesetzte Hemd leuchtet weiterhin, jetzt ohne Kasten dahinter */
.fd-seite .hm-like.is-liked .hm-like__icon {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .75))
            drop-shadow(0 0 10px rgba(252, 110, 81, .8));
}

@media (max-width: 599px) {
    .fd-knopf__bild,
    .fd-seite .hm-like__icon { width: 34px; height: 34px; }
    .fd-seite .hm-like,
    .fd-seite .fd-knopf { min-width: 50px; }
}


/* ===== Werbevideo im Feed ==========================================
   Sieht aus wie ein Beitrag, hat aber keine Knoepfe an der Seite.
   =================================================================== */

.fd-post.ist-werbung { border-color: rgba(255,255,255,.16); }

.fd-werbemarke {
    position: absolute; top: var(--hm-space-3); left: var(--hm-space-3);
    z-index: 2;
    padding: 2px var(--hm-space-3);
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--hm-radius-sm);
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.85);
}

.fd-werbelink { margin-top: var(--hm-space-2); }

/* Der Scroll-Stopp — sitzt in der Ecke, nicht ueber dem Bild.
   Die Werbung laeuft waehrend des Countdowns ganz normal weiter und
   bleibt vollstaendig sichtbar; angehalten wird nur das Scrollen. */
.fd-stopp {
    position: absolute;
    top: var(--hm-space-3); right: var(--hm-space-3);
    z-index: 5;
    display: flex; align-items: center; gap: var(--hm-space-2);
    padding: var(--hm-space-2) var(--hm-space-3);
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--hm-radius-pill);
    pointer-events: none;          /* verdeckt nichts und faengt nichts ab */
}
.fd-stopp[hidden] { display: none; }

.fd-stopp__bild {
    width: 40px; height: 40px; object-fit: contain;
    animation: fdZaehlPuls 1s var(--hm-ease);
}
.fd-stopp__bild[hidden] { display: none; }

.fd-stopp__text {
    color: rgba(255,255,255,.85);
    font-size: var(--hm-size-xs);
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

/* Solange der Stopp laeuft, bleibt der Feed stehen */
html.fd-gesperrt,
html.fd-gesperrt body { overflow: hidden; touch-action: none; }

@media (max-width: 599px) {
    .fd-stopp__bild { width: 34px; height: 34px; }
    .fd-stopp__text { display: none; }      /* auf dem Handy nur die Zahl */
}


/* ===== Handy: Angaben liegen ueber dem Video =======================
   Unter 900px fuellt die Buehne den ganzen Beitrag, und der Block mit
   Name, Titel, Beschreibung, Musik und Datum legt sich unten darueber.
   Nach zehn Sekunden blendet er sich aus (feed.js), ein Tipp holt ihn
   zurueck.

   Ab 900px bleibt alles, wie es war: Text unter dem Video.
   =================================================================== */

@media (max-width: 899px) {

    .fd-post { grid-template-rows: 1fr; }   /* nur noch die Buehne */

    .fd-unten {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        z-index: 3;

        padding: var(--hm-space-6) var(--hm-space-4)
                 calc(var(--hm-space-4) + env(safe-area-inset-bottom));

        /* Verlauf nach unten, damit der Text auf hellen Bildstellen
           lesbar bleibt, ohne das Video wirklich zuzudecken. */
        background: linear-gradient(to top,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.72) 38%,
            rgba(0,0,0,.35) 70%,
            rgba(0,0,0,0) 100%);

        opacity: 1;
        transform: translateY(0);
        transition: opacity 320ms var(--hm-ease),
                    transform 320ms var(--hm-ease);
    }

    .fd-post.ist-verborgen .fd-unten {
        opacity: 0;
        transform: translateY(14px);
        pointer-events: none;        /* im ausgeblendeten Zustand nicht anklickbar */
    }

    /* Die Symbole rechts wandern etwas hoeher, damit sie nicht im
       Textverlauf stehen. */
    .fd-seite { bottom: 38%; }

    /* Text knapper halten, er liegt jetzt ueber dem Bild */
    .fd-text { -webkit-line-clamp: 2; }
    .fd-titel { font-size: var(--hm-size-base); }
    .fd-marken { margin-top: 2px; }

    /* Der Fortschrittsbalken bleibt ganz unten sichtbar */
    .fd-fortschritt { z-index: 4; }
}