/* app.css – Selbstausbau Academy · Umbrella-App-Shell
   Responsive für Desktop UND Mobil. Erbt Farb-/Font-Tokens aus style.css
   (dort in :root definiert), ergaenzt hier aber ein eigenes App-Layout –
   die Event-PWA-Klassen (.landing, .workshop-card) sind bewusst mobil-only. */

/* ── App-Container: mobil full-bleed, ab Tablet zentriert & breiter ── */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.app-main {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
    flex: 1;
}
@media (min-width: 700px) {
    .app-main { padding: 2rem 1.5rem 4rem; }
}

/* ── App-Bar (Top-Navigation) ── */
.app-bar {
    position: sticky; top: 0; z-index: 20;
    background: var(--as-braun-dark); color: #fff;
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem;
    border-bottom: 3px solid var(--as-rot);
}
.app-bar__brand {
    display: flex; align-items: center; gap: .55rem;
    font-weight: 700; letter-spacing: .01em; color: #fff; text-decoration: none;
    margin-right: auto; font-size: 1.02rem;
}
.app-bar__brand img { height: 32px; width: auto; }

.app-nav { display: flex; align-items: center; gap: .25rem; }
.app-nav a {
    color: var(--as-pfirsich); text-decoration: none; font-weight: 700;
    font-size: .9rem; padding: .45rem .7rem; border-radius: 8px;
    transition: background .15s, color .15s; white-space: nowrap;
}
.app-nav a:hover, .app-nav a.is-active { color: #fff; background: rgba(255,255,255,.12); }

/* Mobile: Nav-Toggle einblenden, Links in Off-Canvas-Leiste */
.app-nav__toggle {
    display: none; background: none; border: none; color: #fff;
    font-size: 1.5rem; cursor: pointer; padding: .2rem .4rem; line-height: 1;
}
@media (max-width: 640px) {
    .app-nav__toggle { display: block; }
    .app-nav {
        position: absolute; top: 100%; right: 0; left: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--as-braun-dark); border-bottom: 3px solid var(--as-rot);
        padding: .3rem .6rem .7rem;
        display: none;
    }
    .app-nav.is-open { display: flex; }
    .app-nav a { padding: .7rem .6rem; border-radius: 6px; }
}

/* ── Page-Header innerhalb Main ── */
.page-head { margin-bottom: 1.5rem; }
.page-head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--as-braun-dark); line-height: 1.15; }
.page-head p { color: var(--text-light); margin-top: .4rem; max-width: 60ch; }

/* ── Section-Titel ── */
.section-title {
    font-size: 1.15rem; color: var(--as-braun-dark); margin: 2rem 0 1rem;
    display: flex; align-items: center; gap: .5rem;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Responsive Card-Grid (Videos, Downloads) ── */
.card-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

/* Video-Karte */
.v-card {
    background: var(--card); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
    transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit;
}
.v-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.v-card__thumb {
    position: relative; aspect-ratio: 16 / 9; background: var(--as-hellbeige);
    display: block; overflow: hidden;
}
.v-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-card__play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(55,47,44,.28); color: #fff; font-size: 2.4rem; opacity: 0; transition: opacity .15s;
}
.v-card:hover .v-card__play { opacity: 1; }
.v-card__dur {
    position: absolute; right: .5rem; bottom: .5rem; background: rgba(0,0,0,.72);
    color: #fff; font-size: .72rem; padding: .12rem .4rem; border-radius: 5px; font-weight: 700;
}
.v-card__body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.v-card__cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--as-rot); font-weight: 700; }
.v-card__title { font-size: 1rem; line-height: 1.25; color: var(--as-braun-dark); font-weight: 700; }
.v-card__meta { margin-top: auto; font-size: .78rem; color: var(--text-light); }

/* Locked-Overlay (zeitverzögerte Freigabe / Webinar-Prinzip) */
.v-card.is-locked { pointer-events: none; }
.v-card.is-locked .v-card__thumb { filter: grayscale(.6) brightness(.85); }
.v-card__lock {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .3rem;
    background: rgba(55,47,44,.55); color: #fff; text-align: center; padding: .5rem;
}
.v-card__lock .lock-icon { font-size: 1.8rem; }
.v-card__lock .lock-date { font-size: .74rem; font-weight: 700; }

/* ── Experten-Galerie ── */
.expert-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.expert-card {
    background: var(--card); border-radius: var(--radius); padding: 1.1rem 1rem;
    box-shadow: var(--shadow-sm); text-align: center; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    transition: transform .15s, box-shadow .15s;
}
.expert-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.expert-card__photo {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
    background: var(--as-hellbeige); border: 3px solid var(--as-sand);
}
.expert-card__name { font-weight: 700; color: var(--as-braun-dark); font-size: .95rem; line-height: 1.2; }
.expert-card__company { font-size: .78rem; color: var(--text-light); }

/* ── Download-Karte (Liste, responsive) ── */
.dl-card {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem;
    text-decoration: none; color: inherit; transition: box-shadow .15s;
}
.dl-card:hover { box-shadow: var(--shadow-md); }
.dl-card__icon {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--as-sand);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.dl-card__body { flex: 1; min-width: 0; }
.dl-card__title { font-weight: 700; color: var(--as-braun-dark); }
.dl-card__desc { font-size: .82rem; color: var(--text-light); }
.dl-card__type { font-size: .7rem; text-transform: uppercase; color: var(--as-rot); font-weight: 700; flex-shrink: 0; }

/* ── Auth-Karte (Login/Fehler) zentriert auf beiden Größen ── */
.auth-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 2rem 1.75rem; width: 100%; max-width: 420px; border-top: 4px solid var(--as-rot);
}
.auth-card h1 { font-size: 1.5rem; color: var(--as-braun-dark); }
.auth-card p { color: var(--text-light); margin: .5rem 0 1.25rem; }
.auth-input {
    width: 100%; padding: .8rem .9rem; border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: .8rem; font-size: 1rem; font-family: inherit;
}
.auth-input:focus { outline: 2px solid var(--as-orange); border-color: var(--as-orange); }
.btn-primary {
    width: 100%; padding: .85rem; border: none; border-radius: var(--radius);
    background: var(--as-rot); color: #fff; font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: background .15s; font-family: inherit;
}
.btn-primary:hover { background: var(--as-dunkelrot); }

/* ── Footer ── */
.app-footer {
    background: var(--as-braun-dark); color: var(--as-beige); text-align: center;
    padding: 1.5rem 1rem; font-size: .82rem;
}
.app-footer a { color: var(--as-pfirsich); text-decoration: none; }
.app-footer a:hover { color: #fff; }