/* =====================================================================
   HEMDOMANIA — STARTSEITE   start.css
   ---------------------------------------------------------------------
   Nur das, was ausschliesslich die Lobby betrifft. Alles Allgemeine
   (Farben, Abstaende, Karten, Reihen, Hemd-Like) steht in
   hemdo-design.css und wird hier nur benutzt.
   ===================================================================== */

body {
    margin: 0;
    background: var(--hm-bg);
    color: var(--hm-text);
    padding-bottom: var(--hm-space-8);
}


/* ===== Inhaltsbereich ============================================= */

.hm-main {
    max-width: var(--hm-content-max);
    margin: 0 auto;
    padding: var(--hm-space-5) var(--hm-space-4) 0;
}

.hm-greet {
    margin: 0 0 var(--hm-space-5);
    color: var(--hm-text-dim);
    font-size: var(--hm-size-lg);
}

.hm-foot {
    margin: var(--hm-space-8) 0 0;
    padding-top: var(--hm-space-5);
    border-top: 1px solid var(--hm-border);
    color: var(--hm-text-faint);
    font-size: var(--hm-size-sm);
}
.hm-foot a { color: var(--hm-orange); }


/* ===== Aufmacher oben ============================================= */

.hm-hero { margin-bottom: var(--hm-space-7); }

.hm-hero__link {
    display: grid; gap: var(--hm-space-4);
    text-decoration: none; color: inherit;
    border-radius: var(--hm-radius-lg);
    overflow: hidden;
}
.hm-hero__thumb {
    aspect-ratio: 16 / 9;
    background: var(--hm-bg-elevated);
    border-radius: var(--hm-radius-lg);
    overflow: hidden;
}
.hm-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hm-hero__text { display: grid; gap: var(--hm-space-2); align-content: center; }
.hm-hero__text .hm-pill { justify-self: start; }

@media (min-width: 900px) {
    .hm-hero__link {
        grid-template-columns: 1.4fr 1fr;
        align-items: stretch;
        gap: var(--hm-space-6);
    }
    .hm-hero__thumb { aspect-ratio: auto; min-height: 320px; }
}


/* ===== Karten: Ergaenzungen zur Grundform ========================= */

.hm-card__link { text-decoration: none; color: inherit; display: block; }

/* Fehlendes Vorschaubild: ruhige Flaeche statt kaputtem Symbol.
   Betrifft alte Videos, fuer die noch kein Bild erzeugt wurde. */
.hm-card__thumb img.is-missing {
    opacity: 0;
}
.hm-card__thumb {
    background: var(--hm-bg-elevated)
        radial-gradient(circle at 50% 45%, rgba(252,110,81,.18), transparent 62%);
}

.hm-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--hm-space-2);
    padding: 0 var(--hm-space-2) var(--hm-space-2);
}
.hm-card__views {
    font-size: var(--hm-size-xs);
    color: var(--hm-text-faint);
    padding-right: var(--hm-space-2);
}
.hm-like__count { font-variant-numeric: tabular-nums; }


/* ===== Reiter (Mediathek) ========================================= */

.hm-tabs {
    display: flex; gap: var(--hm-space-2);
    margin: var(--hm-space-4) 0 var(--hm-space-5);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.hm-tabs::-webkit-scrollbar { display: none; }

.hm-tab {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex; align-items: center;
    padding: 0 var(--hm-space-4);
    background: var(--hm-bg-card);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius-pill);
    color: var(--hm-text-dim);
    text-decoration: none;
    font-size: var(--hm-size-sm); font-weight: var(--hm-weight-medium);
    transition: background var(--hm-fast), color var(--hm-fast),
                border-color var(--hm-fast);
}
.hm-tab.is-active {
    background: var(--hm-orange);
    border-color: var(--hm-orange);
    color: #fff;
}

.hm-hinweis {
    margin: 0 0 var(--hm-space-5);
    padding: var(--hm-space-4);
    background: var(--hm-orange-soft);
    border-radius: var(--hm-radius);
    color: var(--hm-text-dim);
    font-size: var(--hm-size-sm);
}
.hm-hinweis a { color: var(--hm-orange); }

.hm-leer {
    padding: var(--hm-space-7) var(--hm-space-4);
    text-align: center;
    color: var(--hm-text-faint);
}


/* ===== Kanalreihe ================================================= */

.hm-row--channels { grid-auto-columns: 42%; }
@media (min-width:  600px) { .hm-row--channels { grid-auto-columns: 26%; } }
@media (min-width:  900px) { .hm-row--channels { grid-auto-columns: 18%; } }
@media (min-width: 1200px) { .hm-row--channels { grid-auto-columns: 13%; } }

.hm-channel {
    display: grid; justify-items: center; gap: var(--hm-space-2);
    padding: var(--hm-space-4) var(--hm-space-2);
    background: var(--hm-bg-card);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius);
    text-decoration: none; color: inherit;
    transition: border-color var(--hm-fast), transform var(--hm-fast);
}
.hm-channel:active { transform: scale(0.98); }
@media (hover: hover) {
    .hm-channel:hover { border-color: var(--hm-orange); }
}

.hm-channel__pic {
    width: 64px; height: 64px; border-radius: 50%;
    overflow: hidden;
    background: var(--hm-bg-elevated);
    display: grid; place-items: center;
    border: 2px solid var(--hm-orange-soft);
}
.hm-channel__pic img { width: 100%; height: 100%; object-fit: cover; }
.hm-channel__initial {
    font-size: var(--hm-size-xl); font-weight: var(--hm-weight-bold);
    color: var(--hm-orange);
}
.hm-channel__name {
    font-size: var(--hm-size-sm); font-weight: var(--hm-weight-medium);
    text-align: center;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-channel__count { font-size: var(--hm-size-xs); color: var(--hm-text-faint); }


/* ===== Desktop: ruhigere Groesse auf der Startseite ================
   Die Lobby war bis 1440px breit, dazu ein Aufmacher mit mindestens
   320px Bildhoehe und der grossen Ueberschrift. Zusammen wirkt das auf
   dem Bildschirm wuchtig. Schmalere Flaeche, flacherer Aufmacher,
   kleinere Ueberschrift — die Karten bleiben dieselben.
   =================================================================== */

@media (min-width: 900px) {

    .hm-main {
        max-width: 1180px;
        padding-top: var(--hm-space-5);
    }

    .hm-hero__link { gap: var(--hm-space-5); }

    .hm-hero__thumb {
        min-height: 0;
        aspect-ratio: 16 / 9;
        max-height: 40vh;
    }

    .hm-h1 { font-size: var(--hm-size-2xl); }
    .hm-h2 { font-size: var(--hm-size-xl); }

    .hm-section { margin-bottom: var(--hm-space-6); }
    .hm-hero    { margin-bottom: var(--hm-space-6); }
}

@media (min-width: 1600px) {
    .hm-main { max-width: 1320px; }
    .hm-hero__thumb { max-height: 44vh; }
}


/* ===== Video der Woche =============================================
   Hervorgehoben durch einen leuchtenden Rahmen statt durch ein eigenes
   Bild — so wirkt es bei jedem Beitrag, auch bei fremden Vorschaubildern.

   Auf dem Handy bleibt die Reihe links, wie bei allen anderen auch.
   Ab 900px steht die Karte mittig und ist deutlich groesser, weil dort
   sonst eine einzelne Karte verloren am linken Rand haengt.
   =================================================================== */

.hm-section--woche .hm-card {
    border: 2px solid var(--hm-orange);
    box-shadow:
        0 0 0 1px rgba(252, 110, 81, .35),
        0 0 18px rgba(252, 110, 81, .45),
        0 0 42px rgba(252, 110, 81, .22);
    animation: hmNeon 2.8s ease-in-out infinite;
}

@keyframes hmNeon {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(252, 110, 81, .35),
            0 0 18px rgba(252, 110, 81, .45),
            0 0 42px rgba(252, 110, 81, .22);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(252, 110, 81, .55),
            0 0 26px rgba(252, 110, 81, .70),
            0 0 64px rgba(252, 110, 81, .34);
    }
}

/* Die Ueberschrift bekommt denselben Akzent */
.hm-section--woche .hm-h2 { color: var(--hm-orange); }

@media (min-width: 900px) {
    .hm-section--woche .hm-row {
        justify-content: center;      /* eine Karte -> mittig */
        grid-auto-columns: 46%;
    }
    .hm-section--woche .hm-section__head { justify-content: center; }
}

@media (min-width: 1600px) {
    .hm-section--woche .hm-row { grid-auto-columns: 38%; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-section--woche .hm-card { animation: none; }
}


/* ===== Verlaufsseite =============================================== */

.vl-liste { display: grid; gap: var(--hm-space-2); }

.vl-zeile {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: var(--hm-space-3);
    align-items: center;
    padding: var(--hm-space-2);
    background: var(--hm-bg-card);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius);
}

.vl-bild {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--hm-radius-sm);
    overflow: hidden;
    background: var(--hm-bg-elevated);
}
.vl-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vl-text { display: grid; gap: 2px; min-width: 0; }
.vl-text a {
    color: var(--hm-text); text-decoration: none;
    font-size: var(--hm-size-sm); font-weight: var(--hm-weight-medium);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vl-text a:hover { color: var(--hm-orange); }

.vl-weg { min-width: 44px; padding: 0 var(--hm-space-3); }

@media (max-width: 599px) {
    .vl-zeile { grid-template-columns: 72px 1fr auto; }
}