/* 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; }

/* ── Avatar (Profil-Einstieg, immer sichtbar) ──
   Auf Mobile per order zwischen Brand und Burger, auf Desktop steht er dank
   DOM-Reihenfolge rechts neben "Logout". Bewusst nicht in der Nav – im
   geschlossenen Drawer waere er weg. */
.app-bar__avatar {
    order: 1;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    flex-shrink: 0; overflow: hidden;
    border: 2px solid var(--as-pfirsich);
    background: var(--as-braun);
    color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    text-decoration: none;
}
.app-bar__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-bar__avatar:hover { border-color: #fff; }
.app-nav__toggle { order: 2; }
@media (min-width: 900px) {
    .app-bar__avatar, .app-nav__toggle { order: 0; }
    .app-bar__avatar { margin-left: .3rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   NAVIGATION – Konzept:
   • Mobile (< 900px): Hamburger + Drawer nach unten (volle Breite),
     Gruppen als Inline-Aufklapper (<details>).
   • Desktop (≥ 900px): Klassische Top-Bar mit horizontalen Links.
     3 Gruppen = Dropdown-Menüs unter der AppBar. Admin/Logout ganz
     rechts (via .app-nav__secondary).
   Historie: 22.07.2026 wurden Sidebar-Layout und Full-Width-Drawer
   auf Desktop verworfen – Nutzer wollte das klassische Muster.
   ══════════════════════════════════════════════════════════════════════ */

/* Burger nur auf Mobile sichtbar. */
.app-nav__toggle {
    display: block; background: none; border: none; color: #fff;
    font-size: 1.5rem; cursor: pointer; padding: .2rem .5rem; line-height: 1;
}
@media (min-width: 900px) {
    .app-nav__toggle { display: none; }
}

/* ── Nav-Container ── */
.app-nav {
    /* Mobile-Default: Drawer nach unten (voll ausklappend) */
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--as-braun-dark);
    border-bottom: 3px solid var(--as-rot);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    padding: .5rem .6rem 1rem;
    z-index: 15;
}
.app-nav.is-open { display: flex; }

/* Auf Mobile bilden Primary/Secondary einen einfachen Stack. */
.app-nav__primary,
.app-nav__secondary {
    display: flex; flex-direction: column; gap: 0;
}
.app-nav__secondary {
    margin-top: .5rem; padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.15);
}

/* ── Desktop: Top-Bar-Menü ── */
@media (min-width: 900px) {
    .app-nav {
        /* Zurueck in den AppBar-Flex: horizontal, transparent, kein Overflow */
        position: static;
        display: flex; flex-direction: row; align-items: center;
        background: transparent;
        border: 0; box-shadow: none;
        padding: 0;
        overflow: visible;
        max-height: none;
        flex: 1;                              /* füllt den Rest der AppBar */
        gap: .1rem;
    }
    .app-nav__primary {
        flex-direction: row; align-items: center; gap: .1rem;
    }
    .app-nav__secondary {
        flex-direction: row; align-items: center; gap: .3rem;
        margin: 0 0 0 auto;                   /* -> ganz nach rechts */
        padding: 0; border: 0;
    }
}

/* ── Top-Level-Link ── */
.app-nav .nav-link {
    color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
    padding: .7rem .8rem; border-radius: 8px; display: block;
    transition: background .15s, color .15s;
}
.app-nav .nav-link:hover,
.app-nav .nav-link.is-active { background: rgba(255,255,255,.12); }
.app-nav .nav-link--muted { color: var(--as-pfirsich); font-weight: 600; font-size: .88rem; }
.app-nav .nav-link.cta { background: var(--as-rot); color: #fff; margin-top: .3rem; text-align: center; }
.app-nav .nav-link.cta:hover { background: var(--as-dunkelrot); }

@media (min-width: 900px) {
    .app-nav .nav-link {
        padding: .5rem .75rem; font-size: .9rem;
    }
    .app-nav .nav-link.cta { margin-top: 0; padding: .45rem 1rem; }
}

/* ── Gruppen (Menschen / Fahrzeuge / Meine Academy) ── */
.app-nav .nav-group { margin: .25rem 0; }
.app-nav .nav-group > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .8rem; border-radius: 8px;
    color: #fff; font-weight: 700; font-size: .95rem;
    transition: background .15s;
    user-select: none;
}
.app-nav .nav-group > summary::-webkit-details-marker { display: none; }
.app-nav .nav-group > summary:hover { background: rgba(255,255,255,.08); }
.app-nav .nav-group.is-active > summary { background: rgba(255,255,255,.12); }
.app-nav .nav-group__icon { font-size: 1.1rem; line-height: 1; }
.app-nav .nav-group__label { flex: 1; }
.app-nav .nav-group__chev {
    color: var(--as-pfirsich); font-size: .85rem; line-height: 1;
    transition: transform .15s;
}
.app-nav .nav-group[open] > summary > .nav-group__chev { transform: rotate(180deg); }

/* Mobile: aufgeklappte Gruppe steht INLINE als Sub-Liste im Drawer */
.app-nav .nav-group__body {
    display: flex; flex-direction: column;
    padding: .15rem 0 .3rem .6rem;
    border-left: 2px solid rgba(255,255,255,.1);
    margin-left: 1.15rem;
}

/* Desktop: Gruppe wird zu klassischem Dropdown-Menue.
   Wichtig: <details>-Body wird NUR sichtbar wenn [open], sonst display:none. */
@media (min-width: 900px) {
    .app-nav .nav-group { margin: 0; position: relative; }
    .app-nav .nav-group > summary {
        padding: .5rem .75rem; font-size: .9rem;
    }
    .app-nav .nav-group__body {
        display: none;                     /* geschlossenes <details> */
        position: absolute; top: calc(100% + .6rem); left: 0;
        min-width: 220px;
        background: var(--as-braun-dark);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 10px;
        box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
        padding: .4rem;
        margin: 0;
        z-index: 30;
    }
    .app-nav .nav-group[open] > .nav-group__body { display: flex; flex-direction: column; }
    /* Sub-Links im Dropdown etwas kompakter */
    .app-nav .nav-group__body .nav-sublink { padding: .5rem .7rem; }
}

.app-nav .nav-sublink {
    color: var(--as-pfirsich); text-decoration: none; font-weight: 600; font-size: .9rem;
    padding: .55rem .8rem; border-radius: 6px; display: flex; align-items: center; gap: .4rem;
    transition: background .15s, color .15s;
}
.app-nav .nav-sublink:hover { color: #fff; background: rgba(255,255,255,.08); }
.app-nav .nav-sublink.is-active { color: #fff; background: rgba(255,255,255,.14); }

.app-nav .nav-count {
    background: var(--as-rot); color: #fff; font-size: .7rem;
    padding: .05rem .4rem; border-radius: 999px; font-weight: 700; margin-left: .25rem;
}

/* ── 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); }

/* ── Login-Kanal-Tabs (E-Mail / WhatsApp) ── */
.channel-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; }
.channel-tab { flex: 1; padding: .55rem; border: 1px solid var(--border); background: var(--as-hellbeige); border-radius: 8px; font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--text-light); font-family: inherit; transition: background .15s, color .15s; }
.channel-tab.is-active { background: var(--as-rot); border-color: var(--as-rot); color: #fff; }

/* Nav-CTA-Styles wanderten mit dem Drawer-Refactor nach oben (siehe .nav-link.cta). */

/* ═══ HOMEPAGE ═══ */
.home-page .app-main { padding-top: 1.75rem; }

/* Full-Bleed-Helfer: Element ueber die Container-Breite hinaus */
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* Hero mit Slider */
.home-hero { position: relative; height: clamp(340px, 56vh, 560px); overflow: hidden; background: var(--as-braun-dark); }
.home-hero .slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transform: scale(1.04);
    transition: opacity 2.2s ease-in-out, transform 13s ease-out;
}
.home-hero .slide.is-active { opacity: 1; transform: scale(1.12); }
.home-hero::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(55,47,44,.25) 0%, rgba(55,47,44,.55) 55%, rgba(55,47,44,.92) 100%); }
.home-hero__inner {
    position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 2rem 1.25rem 2.5rem; color: #fff;
}
.home-hero__inner h1 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: 1.08; max-width: 18ch; text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 4px 24px rgba(0,0,0,.5); }
.home-hero__inner p { color: #fff; font-size: clamp(1rem, 2vw, 1.25rem); margin-top: .75rem; max-width: 46ch; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 12px rgba(0,0,0,.5); }
.home-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hero-btn {
    display: inline-flex; align-items: center; gap: .4rem; padding: .8rem 1.5rem; border-radius: var(--radius);
    font-weight: 700; text-decoration: none; font-size: 1rem; border: 2px solid transparent;
}
.hero-btn--primary { background: var(--as-rot); color: #fff; }
.hero-btn--primary:hover { background: var(--as-dunkelrot); }
.hero-btn--ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(3px); }
.hero-btn--ghost:hover { background: rgba(255,255,255,.24); }

/* Stat-Leiste unter dem Hero */
.home-stats { padding: 1.1rem 1rem; background: var(--as-braun-dark); color: var(--as-beige); }
.home-stats__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; max-width: 900px; margin: 0 auto; }
.home-stats__inner > * { text-align: center; min-width: 0; text-decoration: none; color: inherit; transition: color .15s; padding: .1rem .25rem; }
.home-stats__inner > a:hover { color: #fff; }
.home-stats__inner b { display: block; font-size: 1.5rem; color: #fff; }
.home-stats__inner span { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }

/* 2-Spalten-Layout Homepage */
.home-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-top: 1.75rem; }
@media (min-width: 900px) { .home-grid { grid-template-columns: minmax(0,1fr) 320px; gap: 2rem; } }
.home-side { display: flex; flex-direction: column; gap: 1.25rem; }

/* Top-Story */
.top-story { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); color: #fff; min-height: 300px; display: flex; align-items: flex-end; }
.top-story__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.top-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(55,47,44,.1), rgba(55,47,44,.85)); }
.top-story__body { position: relative; z-index: 2; padding: 1.5rem; }
.top-story__kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--as-pfirsich); }
.top-story__body h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; margin: .3rem 0 .5rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.top-story__body p { opacity: .95; max-width: 60ch; }

/* Sidebar-Karten */
.side-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.15rem; }
.side-card > h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: var(--as-dunkelrot); margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--as-hellbeige); }
.ws-item { display: block; padding: .6rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.ws-item:last-child { border-bottom: none; }
.ws-item__title { font-weight: 700; color: var(--as-braun-dark); font-size: .92rem; line-height: 1.25; }
.ws-item__meta { font-size: .76rem; color: var(--text-light); margin-top: .2rem; }
.ws-item__cat { color: var(--as-rot); font-weight: 700; }

/* Experten-Vorschau (Avatare) */
.expert-preview { display: flex; flex-wrap: wrap; gap: .5rem; }
.expert-preview a { text-decoration: none; }
.expert-preview img, .expert-preview .ph {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--as-sand);
    background: var(--as-hellbeige); display: flex; align-items: center; justify-content: center;
}

/* Werbe-Slot */
.ad-slot { border: 1px dashed var(--border); border-radius: var(--radius); overflow: hidden; }
.ad-slot__label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); text-align: right; padding: .2rem .5rem 0; }
.ad-house { background: linear-gradient(135deg, var(--as-braun-dark), var(--as-rot)); color: #fff; padding: 1.4rem 1.2rem; text-align: center; text-decoration: none; display: block; }
.ad-house b { display: block; font-size: 1.05rem; margin-bottom: .3rem; }
.ad-house span { font-size: .85rem; opacity: .9; }
.ad-banner img { width: 100%; height: auto; display: block; }

/* Newsletter-Band */
.nl-band { background: var(--as-sand); border-radius: var(--radius); padding: 1.75rem 1.5rem; text-align: center; margin-top: 1.75rem; }
.nl-band h2 { color: var(--as-braun-dark); font-size: 1.4rem; }
.nl-band p { color: var(--as-braun); margin: .4rem auto 1.1rem; max-width: 52ch; }
.nl-form { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.nl-form input { flex: 1; min-width: 220px; max-width: 340px; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; font-family: inherit; }

/* Kategorie-Kacheln (Ausbauprinzipien-Einstieg) */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.cat-tile { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .9rem 1rem; text-decoration: none; color: var(--as-braun-dark); font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .5rem; transition: transform .15s, box-shadow .15s; border-left: 4px solid var(--as-rot); }
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Event-Cross-Link-Band */
.event-band { background: var(--as-braun-dark); color: #fff; padding: 2.25rem 1.25rem; text-align: center; margin-top: 2rem; }
.event-band h2 { color: #fff; font-size: 1.4rem; margin-bottom: .3rem; }
.event-band p { opacity: .85; margin-bottom: 1.5rem; }
.event-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 820px; margin: 0 auto; }
@media (min-width: 640px) { .event-cards { grid-template-columns: 1fr 1fr; } }
.event-card { background: #fff; border-radius: var(--radius); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.event-card__logo { height: 96px; width: auto; max-width: 82%; object-fit: contain; }
.event-card__links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.event-card__links a {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700;
    text-decoration: none; color: var(--as-braun-dark); background: var(--as-hellbeige);
    padding: .45rem .8rem; border-radius: 999px; transition: background .15s, color .15s;
}
.event-card__links a:hover { background: var(--as-rot); color: #fff; }
.event-card__links .soon {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700;
    color: var(--text-light); background: transparent; border: 1px dashed var(--border);
    padding: .45rem .8rem; border-radius: 999px; cursor: default;
}

/* Event-Countdown */
.countdown { background: linear-gradient(120deg, var(--as-braun-dark), var(--as-dunkelrot)); color: #fff; border-radius: var(--radius); padding: 1.6rem 1.75rem; margin-bottom: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; box-shadow: var(--shadow-md); }
.countdown__info { flex: 1 1 240px; min-width: 200px; }
.countdown__kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--as-pfirsich); font-weight: 700; }
.countdown__name { font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin: .25rem 0 .3rem; }
.countdown__meta { font-size: .88rem; opacity: .85; }
.countdown__clock { display: flex; gap: .6rem; margin-left: auto; }
.cd-box { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .55rem .5rem; text-align: center; min-width: 58px; }
.cd-box b { display: block; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: .25rem; }
.cd-box span { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.countdown__cta { display: inline-flex; align-items: center; gap: .4rem; background: var(--as-rot); color: #fff; font-weight: 700; text-decoration: none; padding: .8rem 1.4rem; border-radius: var(--radius); white-space: nowrap; }
.countdown__cta:hover { background: #fff; color: var(--as-rot); }
@media (max-width: 620px) {
    .countdown { padding: 1.25rem; gap: 1rem; }
    .countdown__name { font-size: 1.2rem; }
    .countdown__meta { font-size: .8rem; }
    .countdown__clock { width: 100%; margin-left: 0; gap: .4rem; }
    .cd-box { flex: 1; padding: .45rem .3rem; min-width: 0; }
    .cd-box b { font-size: 1.35rem; }
    .cd-box span { font-size: .55rem; }
    .countdown__cta { width: 100%; justify-content: center; padding: .7rem 1.2rem; }

    /* Home-Hero kompakter auf Mobile */
    .home-hero { height: clamp(300px, 46vh, 440px); }
    .home-hero__inner { padding: 1.5rem 1rem 1.6rem; }
    .home-hero__inner h1 { font-size: 1.55rem; line-height: 1.15; }
    .home-hero__inner p { font-size: .92rem; margin-top: .5rem; }
    .home-hero__cta { gap: .5rem; margin-top: 1rem; flex-direction: column; }
    .hero-btn { width: 100%; justify-content: center; padding: .7rem 1.1rem; font-size: .95rem; }

    /* Stat-Leiste 5 gleichbreite Spalten, kompakter */
    .home-stats { padding: .8rem .5rem; }
    .home-stats__inner { gap: .3rem; }
    .home-stats__inner b { font-size: 1.15rem; }
    .home-stats__inner span { font-size: .62rem; letter-spacing: .02em; }

    /* Home-Main: weniger Abstand oben auf Mobile */
    .home-page .app-main { padding-top: 1.1rem; }
}

/* Gate-Hinweis fuer Public */
.gate-note { background: #FBF1E9; border: 1px solid var(--as-pfirsich); border-left: 4px solid var(--as-orange); border-radius: var(--radius); padding: .8rem 1rem; font-size: .88rem; color: var(--as-braun); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.gate-note a { color: var(--as-rot); font-weight: 700; }

/* ═══ ADMIN ═══ */
.admin-tile { position: relative; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .35rem; transition: transform .15s, box-shadow .15s; border-top: 3px solid var(--as-rot); }
.admin-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.admin-tile.is-soon { opacity: .55; pointer-events: none; border-top-color: var(--border); }
.admin-tile__icon { font-size: 2rem; }
.admin-tile__name { font-weight: 700; color: var(--as-braun-dark); }
.admin-tile__count { background: var(--as-sand); border-radius: 999px; padding: 0 .5rem; font-size: .8rem; margin-left: .25rem; }
.admin-tile__desc { font-size: .82rem; color: var(--text-light); }
.admin-tile__soon { position: absolute; top: .8rem; right: .9rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); }

.admin-flash { background: #E8F3EC; border: 1px solid #40916c; color: #2d6a4f; border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; }
.admin-error { background: #FBE9E7; border: 1px solid var(--as-rot); color: var(--as-dunkelrot); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; }

.admin-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .admin-layout { grid-template-columns: 380px 1fr; align-items: start; } }

.admin-form h3 { font-size: 1rem; color: var(--as-dunkelrot); margin-bottom: .8rem; }
.admin-form label { display: block; font-weight: 700; font-size: .85rem; color: var(--as-braun-dark); margin-bottom: .8rem; }
.admin-form label small { font-weight: 400; color: var(--text-light); }
.admin-form .req { color: var(--as-rot); }
.admin-form input[type=text], .admin-form input[type=datetime-local], .admin-form textarea, .admin-form select {
    width: 100%; margin-top: .25rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px; font-size: .92rem; font-family: inherit; font-weight: 400;
}
.admin-form small { display: block; margin-top: .2rem; }
.admin-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.admin-check { display: flex !important; align-items: center; gap: .5rem; }
.admin-check input { width: auto !important; margin: 0 !important; }
.admin-form__actions { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.admin-form__actions .btn-primary { width: auto; padding: .6rem 1.4rem; }
.admin-cancel { color: var(--text-light); text-decoration: none; }

.admin-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .8rem 1rem; margin-bottom: .6rem; }
.admin-row__meta { font-size: .78rem; color: var(--text-light); margin-top: .2rem; }
.admin-row__actions { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.admin-row__actions a { color: var(--as-rot); font-weight: 700; text-decoration: none; font-size: .85rem; }
.admin-del { background: none; border: none; color: var(--text-light); cursor: pointer; font-size: .85rem; font-family: inherit; }
.admin-del:hover { color: var(--as-rot); }
.tag { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .45rem; border-radius: 5px; }
.tag--draft { background: var(--as-hellbeige); color: #5A4F48; }   /* war --text-light: nur 3,97:1 */
.tag--soon { background: #FDECC8; color: #9a6700; }
.tag--live { background: #D3F0DD; color: #2d6a4f; }

/* Rollen- und Kategorie-Badges.
   Jede Variante bringt Hintergrund UND Textfarbe mit – frueher wurde .tag--live
   per Inline-Style umgefaerbt, wodurch dessen dunkelgruener Text auf dunklem
   Grund stehenblieb und unlesbar wurde. Alle Paare liegen ueber 5:1 Kontrast. */
.tag--rejected    { background: #FBDDDD; color: #9B1C1C; }
.tag--role-admin  { background: var(--as-braun-dark); color: #fff; }
.tag--role-expert { background: var(--as-braun);      color: #fff; }
.tag--role-coach  { background: var(--as-orange);     color: var(--as-braun-dark); }
.tag--cat         { background: var(--as-hellbeige);  color: var(--as-braun); text-transform: none; }
.tag--cat-manual  { background: var(--as-pfirsich);   color: var(--as-braun); text-transform: none; }

/* Story-Phase: „on the road" (fertig, unterwegs) vs. „under construction" (im Ausbau).
   Beide bewusst mit textueller Bedeutung – nicht nur Farbe – damit sie ohne CSS lesbar sind. */
.tag--phase-road  { background: #D3F0DD;              color: #1B5030;        text-transform: none; }
.tag--phase-build { background: var(--as-pfirsich);   color: var(--as-braun); text-transform: none; }

/* Autoren-Byline: „Expert approved · von X" bzw. „Community contribution · von X". */
.author-byline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .9rem; color: var(--text-light); }
.author-byline a { color: var(--as-rot); font-weight: 700; text-decoration: none; }
.author-byline a:hover { text-decoration: underline; }
.author-byline__notice { color: var(--text-light) !important; font-weight: 400 !important; text-decoration: none !important; margin-left: .1rem; font-size: .85rem; }
.author-byline__notice:hover { color: var(--as-rot) !important; }

/* Endorse-Leiste unter der actionBar: Badge + Namen + Button in einer Reihe. */
.endorse-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .88rem; color: var(--text-light); }
.endorse-bar__names a { color: var(--as-rot); font-weight: 700; text-decoration: none; }
.endorse-bar__names a:hover { text-decoration: underline; }
.endorse-btn { font-size: .8rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--as-braun-dark); cursor: pointer; font-family: inherit; font-weight: 700; }
.endorse-btn:hover { border-color: var(--as-rot); color: var(--as-rot); }
.endorse-btn.is-active { background: var(--as-braun); color: #fff; border-color: var(--as-braun); }
.endorse-btn.is-active:hover { background: var(--as-braun-dark); border-color: var(--as-braun-dark); color: #fff; }

/* Firmen-Admin */
.firm-adlist { display: flex; flex-wrap: wrap; gap: .5rem; }
.firm-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--as-sand); border-radius: 999px; padding: .3rem .7rem; font-size: .85rem; font-weight: 700; color: var(--as-braun-dark); }
.firm-chip img { height: 20px; width: auto; max-width: 40px; object-fit: contain; }
.firm-row { display: flex; align-items: center; gap: .9rem; background: var(--card); border-radius: 10px; box-shadow: var(--shadow-sm); padding: .55rem .8rem; margin-bottom: .45rem; }
.firm-row__logo { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; font-size: 1.1rem; overflow: hidden; }
.firm-row__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.firm-row__name { flex: 1; min-width: 0; font-weight: 700; color: var(--as-braun-dark); font-size: .9rem; }
.firm-row__web { margin-left: .4rem; text-decoration: none; }
.firm-toggle { flex-shrink: 0; background: var(--as-hellbeige); border: 1px solid var(--border); color: var(--text-light); font-weight: 700; font-size: .8rem; padding: .4rem .8rem; border-radius: 999px; cursor: pointer; font-family: inherit; transition: all .15s; }
.firm-toggle.is-on { background: var(--as-rot); border-color: var(--as-rot); color: #fff; }

/* ═══ FAHRZEUG-STECKBRIEF ═══ */
.spec-box { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--border); }
.spec-box__head { background: var(--as-braun-dark); color: #fff; padding: .9rem 1.1rem; display: flex; align-items: center; gap: .6rem; }
.spec-box__head .icon { font-size: 1.3rem; }
.spec-box__head b { font-size: 1.05rem; }
.spec-box__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 480px) { .spec-box__grid { grid-template-columns: 1fr 1fr; } }
.spec-row { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 1.1rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.spec-row span { color: var(--text-light); }
.spec-row b { color: var(--as-braun-dark); text-align: right; }
.spec-box__cta { padding: .8rem 1.1rem; }
.spec-box__cta a { color: var(--as-rot); font-weight: 700; text-decoration: none; font-size: .9rem; }

/* Fahrzeug-Galerie */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s; }
.gallery-grid img:hover { transform: scale(1.03); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.lightbox.is-open { display: flex; }
.lightbox img, .lightbox__img { max-width: 96vw; max-height: 92vh; border-radius: 8px; user-select: none; }
.lightbox__close { position: absolute; top: 1rem; right: 1.2rem; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; line-height: 1; padding: .25rem .5rem; }
.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); color: #fff; border: none;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    font-size: 2rem; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.lightbox__nav:hover { background: rgba(255,255,255,.24); transform: translateY(-50%) scale(1.08); }
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
.lightbox__counter {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    color: #fff; background: rgba(0,0,0,.5); padding: .3rem .8rem;
    border-radius: 999px; font-size: .82rem; font-weight: 700;
}
@media (max-width: 620px) {
    .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
    .lightbox__prev { left: .4rem; }
    .lightbox__next { right: .4rem; }
    .lightbox__close { top: .5rem; right: .5rem; font-size: 1.8rem; }
}

/* Fahrzeug-Karte (Liste) */
.veh-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.veh-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.veh-card__img { aspect-ratio: 16/10; object-fit: cover; width: 100%; background: var(--as-hellbeige); }
.veh-card__body { padding: .9rem 1rem; }
.veh-card__name { font-weight: 700; color: var(--as-braun-dark); }
.veh-card__meta { font-size: .82rem; color: var(--text-light); margin-top: .2rem; }

/* Admin: Bild-Verwaltung */
.vimg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; margin-top: .8rem; }
.vimg { position: relative; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.vimg img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.vimg.is-cover { outline: 3px solid var(--as-rot); }
.vimg__bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; background: rgba(55,47,44,.75); padding: .2rem .35rem; }
.vimg__bar button { background: none; border: none; color: #fff; cursor: pointer; font-size: .72rem; font-weight: 700; }

/* ── Login-Hintergrund-Slider ── */
.login-slider { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--as-braun-dark); }
.login-slider .slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1.04);
    transition: opacity 2.2s ease-in-out, transform 13s ease-out;
}
.login-slider .slide.is-active { opacity: 1; transform: scale(1.12); }
.login-slider::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(55,47,44,.48) 0%, rgba(55,47,44,.72) 100%);
}
.login-page .app-shell  { position: relative; z-index: 1; background: transparent; }
.login-page .app-main   { background: transparent; }
.login-page .app-bar    { background: rgba(55,47,44,.82); backdrop-filter: blur(4px); }
.login-page .app-footer { background: transparent; color: #fff; }
.login-page .app-footer a { color: var(--as-pfirsich); }

/* ── Footer ── */
.app-footer {
    background: var(--as-braun-dark); color: var(--as-beige); text-align: center;
    padding: 1.5rem 1rem; font-size: .82rem;
}
.app-footer__version { margin-top: .35rem; font-size: .74rem; opacity: .55; letter-spacing: .02em; }
.app-footer a { color: var(--as-pfirsich); text-decoration: none; }
.app-footer a:hover { color: #fff; }

/* Sanftes Erinnerungs-Banner: erscheint zwischen Header und Content, wenn eine
   E-Mail-Adresse fehlt und der Erinnerungs-Zaehler laeuft (siehe Auth::requireAuth).
   Nicht wegklickbar – aber dezent genug, dass es nicht wie eine Fehlermeldung wirkt. */
.email-reminder-banner {
    background: #FBF1E9;
    border-bottom: 2px solid var(--as-orange);
    color: var(--as-braun);
    padding: .6rem 1.25rem;
    font-size: .88rem;
    text-align: center;
}
.email-reminder-banner a {
    color: var(--as-rot);
    font-weight: 700;
    text-decoration: none;
    margin-left: .25rem;
}
.email-reminder-banner a:hover { text-decoration: underline; }

/* ═══ Action-Bar (Herz-Favorit + Teilen) ═══ */
.action-bar {
    display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
    margin: .75rem 0 1.25rem;
}
.fav-btn, .share-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem .9rem; border-radius: 999px;
    border: 1.5px solid var(--as-hellbeige, #D7D2CB);
    background: #fff; color: var(--as-braun-dark, #372F2C);
    font-family: inherit; font-size: .85rem; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.fav-btn:hover, .share-btn:hover {
    border-color: var(--as-rot); color: var(--as-rot);
}
.fav-btn:active, .share-btn:active { transform: scale(.96); }
.fav-btn.is-active {
    background: var(--as-rot); color: #fff; border-color: var(--as-rot);
}
.fav-btn.is-active:hover { background: var(--as-dunkelrot); border-color: var(--as-dunkelrot); color: #fff; }
.fav-btn svg, .share-btn svg { flex-shrink: 0; }

/* Nav-Zähler für Favoriten */
.app-nav .nav-count {
    display: inline-block; min-width: 20px;
    padding: .05rem .35rem; margin-left: .25rem;
    background: var(--as-rot); color: #fff;
    border-radius: 999px; font-size: .7rem; font-weight: 700;
    text-align: center; line-height: 1.4;
}

/* Toast-Meldung */
#academy-toast {
    position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%) translateY(8px);
    max-width: 92vw; padding: .7rem 1.1rem;
    background: var(--as-braun-dark, #372F2C); color: #fff;
    border-radius: 10px; font-size: .87rem; font-weight: 700;
    box-shadow: 0 3px 16px rgba(0,0,0,.22);
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
}
#academy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#academy-toast[data-type="warn"] { background: var(--as-orange, #F18864); }
#academy-toast[data-type="ok"]   { background: #2d6a4f; }

/* ═══ Share-Band auf Startseite ═══ */
.share-band {
    background: linear-gradient(120deg, var(--as-dunkelrot, #9E3323), var(--as-rot, #CF3628));
    color: #fff; border-radius: var(--radius); padding: 1.75rem 1.5rem;
    margin: 2rem 0; text-align: center; box-shadow: var(--shadow-md);
}
.share-band h2 { color: #fff; font-size: 1.35rem; margin-bottom: .35rem; }
.share-band p  { color: rgba(255,255,255,.9); margin: 0 auto 1.1rem; max-width: 52ch; }
.share-band-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: var(--as-rot, #CF3628);
    border: none; border-radius: 999px;
    padding: .75rem 1.5rem; font-family: inherit; font-size: 1rem; font-weight: 700;
    cursor: pointer; text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    transition: transform .15s, box-shadow .15s;
}
.share-band-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.share-band-btn:active { transform: translateY(0); }
.share-band-btn svg { flex-shrink: 0; }

@media (max-width: 620px) {
    .share-band { padding: 1.4rem 1.1rem; margin: 1.4rem 0; }
    .share-band h2 { font-size: 1.15rem; }
    .fav-btn, .share-btn { padding: .5rem .8rem; font-size: .82rem; }
}

/* ═══ Story-Layout: 2 Spalten (Content + Staffeln-Sidebar) ═══ */
.story-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 960px) {
    .story-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
    .story-side   { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
.story-main   { min-width: 0; }

.story-seasons { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; }
.story-seasons__head {
    font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--as-dunkelrot); margin-bottom: .8rem;
    padding-bottom: .5rem; border-bottom: 2px solid var(--as-hellbeige);
}

.season-block { border-bottom: 1px solid var(--border); padding: .5rem 0; }
.season-block:last-child { border-bottom: none; }
.season-block > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .25rem; border-radius: 6px;
    font-weight: 700; color: var(--as-braun-dark);
    transition: background .15s;
}
.season-block > summary::-webkit-details-marker { display: none; }
.season-block > summary::before {
    content: '▸'; color: var(--as-rot); font-size: .9rem;
    transition: transform .15s;
    display: inline-block; width: .8rem; text-align: center;
}
.season-block[open] > summary::before { transform: rotate(90deg); }
.season-block > summary:hover { background: var(--as-hellbeige); }
.season-block__num { display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; padding: .1rem .4rem; border-radius: 6px;
    background: var(--as-rot); color: #fff; font-size: .75rem; font-weight: 700; }
.season-block__title { flex: 1; font-size: .92rem; }
.season-block__count { color: var(--text-light); font-size: .78rem; font-weight: 700; }
.season-block__intro { color: var(--text-light); font-size: .82rem; margin: .35rem .25rem .5rem; line-height: 1.4; }
.season-block__eps { display: flex; flex-direction: column; gap: .35rem; padding: .3rem 0 .1rem; }

.ep-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .55rem; border-radius: 8px;
    background: var(--as-hellbeige, #f5f0eb); text-decoration: none; color: var(--as-braun-dark);
    transition: background .12s;
}
.ep-item:hover { background: #E8DFD3; }
.ep-item.is-locked { opacity: .65; cursor: not-allowed; }
.ep-item__icon { flex: 0 0 auto; font-size: .95rem; color: var(--as-rot); }
.ep-item.is-locked .ep-item__icon { color: var(--text-light); }
.ep-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ep-item__title { font-weight: 700; font-size: .85rem; line-height: 1.25; }
.ep-item__meta  { font-size: .74rem; color: var(--text-light); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-item__dur   { font-size: .74rem; font-weight: 700; color: var(--as-rot);
    background: #fff; padding: .12rem .4rem; border-radius: 6px; flex: 0 0 auto; }

/* ── Downloads: Checklisten (Arbeitsschritte / Material / Werkzeuge) ──────── */
.cl-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.cl-pill { background: #fff; border: 1px solid var(--border); color: var(--as-braun-dark); font-size: .82rem; font-weight: 700; border-radius: 999px; padding: .35rem .9rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cl-pill:hover { border-color: var(--as-rot); color: var(--as-rot); }
.cl-pill.is-active { background: var(--as-rot); border-color: var(--as-rot); color: #fff; }
.checklist-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .checklist-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.checklist { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem 1.4rem; border-top: 3px solid var(--as-rot); }
.checklist__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: none; padding: 0; color: inherit; }
.checklist__title { font-size: 1.15rem; color: var(--as-braun-dark); line-height: 1.2; }
.checklist__meta { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.checklist__cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--as-rot); background: var(--as-sand); border-radius: 5px; padding: .12rem .5rem; }
.cl-print { background: #fff; border: 1px solid var(--border); color: var(--as-braun-dark); font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .25rem .65rem; cursor: pointer; white-space: nowrap; }
.cl-print:hover { border-color: var(--as-rot); color: var(--as-rot); }

@media print {
    .app-bar, .app-footer, .page-head, .cl-filter, .aff-disclosure, .cl-print, .aff-btn { display: none !important; }
    body.printing-one .checklist:not(.is-printing) { display: none !important; }
    .checklist-grid { display: block !important; }
    .checklist { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; }
    .cl-check input { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.checklist__desc { color: var(--text-light); font-size: .9rem; margin-top: .4rem; }
.cl-section { margin-top: 1.1rem; }
.cl-section__h { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--as-warmgrau); font-weight: 700; display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.cl-steps { list-style: decimal; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.cl-steps li { color: var(--text); }
.cl-steps__t { font-weight: 600; }
.cl-items { list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.cl-item { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .3rem 0; }
.cl-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; color: var(--text); }
.cl-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--as-rot); }
.cl-item__t { }
.cl-note { font-size: .8rem; color: var(--text-light); }
.aff-btn { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: #fff; background: var(--as-rot); border-radius: 999px; padding: .28rem .7rem; text-decoration: none; white-space: nowrap; transition: background .15s; }
.aff-btn:hover { background: var(--as-dunkelrot); }
.cl-file { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-weight: 700; color: var(--as-braun-dark); background: var(--as-sand); border-radius: 8px; padding: .55rem .8rem; text-decoration: none; }
.cl-file:hover { box-shadow: var(--shadow-sm); }
.cl-file__ico { font-size: 1.2rem; }
.aff-disclosure { margin-top: 1.25rem; font-size: .78rem; color: var(--text-light); max-width: 70ch; line-height: 1.5; }

/* ── Admin: Checklisten-Zeilen-Editor (Repeater) ─────────────────────────── */
.item-block { margin-bottom: .9rem; border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; background: var(--as-sand); }
.item-block__head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: .85rem; color: var(--as-braun-dark); margin-bottom: .5rem; }
.item-add { background: #fff; border: 1px solid var(--as-rot); color: var(--as-rot); font-weight: 700; font-size: .78rem; border-radius: 999px; padding: .2rem .7rem; cursor: pointer; }
.item-add:hover { background: var(--as-rot); color: #fff; }
.item-list { display: flex; flex-direction: column; gap: .5rem; }
/* Flex-Wrap statt Grid: Felder brechen um, wenn die (schmale) Spalte zu eng wird,
   und kollabieren NIE zu einem Kreis – funktioniert in jeder Containerbreite. */
.item-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; position: relative; padding-right: 2rem; }
.item-row input { margin: 0 !important; padding: .45rem .55rem !important; font-size: .85rem; flex: 1 1 9rem; min-width: 7rem; }
.item-row--prod input[type="url"] { flex: 1 1 100%; }   /* Link-Feld eigene Zeile */
.item-del { position: absolute; right: 0; top: .15rem; background: #fff; border: 1px solid var(--border); border-radius: 6px; color: var(--text-light); cursor: pointer; font-size: 1rem; line-height: 1; padding: .3rem .45rem; }
.item-del:hover { color: var(--as-signal); border-color: var(--as-signal); }

.checklist { scroll-margin-top: 5rem; }
.checklist:target { box-shadow: 0 0 0 2px var(--as-rot), var(--shadow-md); }

/* ── Sterne-Rating (public/inc/rating.php) ──────────────────────── */
.rating-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: .6rem .85rem; background: var(--as-hellbeige);
    border-radius: var(--radius); margin: .5rem 0 1rem;
    font-size: .9rem;
}
.rating-bar--compact { padding: .35rem .6rem; font-size: .82rem; gap: .4rem; margin: .35rem 0; }
/* Anzeige-Sterne links: leerer Zustand als abgesetztes Grau statt --border,
   damit sie auf beigem Hintergrund auch ohne Bewertungen sichtbar sind. */
.rating-bar__stars {
    color: #d8c7b3; letter-spacing: 2px; line-height: 1;
    font-size: 1.1rem;
}
.rating-bar--compact .rating-bar__stars { font-size: 1rem; letter-spacing: 1px; }
.rating-bar__stars .rating-star { color: #d8c7b3; }
.rating-bar__stars .rating-star.is-on { color: #f4a300; text-shadow: 0 0 0.5px #c48200; }
.rating-bar__meta { color: var(--as-braun-dark); }
.rating-bar__meta strong { color: var(--as-dunkelrot); }
.rating-bar__form { display: flex; align-items: center; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
.rating-bar__label { font-size: .82rem; color: var(--as-braun); margin-right: .3rem; font-weight: 700; }
.rating-picker { display: inline-flex; align-items: center; gap: 2px; flex-direction: row-reverse; }
/* Bewerten-Picker: gleiche Groesse wie Anzeige, sichtbarer Off-State.
   DOM ist absteigend (5..1). Durch flex-direction: row-reverse steht visuell
   1 links, 5 rechts. `.rating-pick:hover ~ .rating-pick` faerbt die DOM-
   Geschwister nach dem gehoverten (= niedrigere Werte, visuell links).
   Ergebnis: Hover auf 3 leuchtet 1..3, Hover auf 5 leuchtet 1..5. */
.rating-pick {
    background: none; border: none; cursor: pointer; padding: 0 .05rem;
    font-size: 1.35rem; line-height: 1; color: #d8c7b3;
    transition: color .12s, transform .1s;
}
.rating-picker:hover .rating-pick { color: #d8c7b3; }
.rating-picker .rating-pick:hover,
.rating-picker .rating-pick:hover ~ .rating-pick { color: #f4a300; }
.rating-pick.is-on { color: #f4a300; }
.rating-bar__remove {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-light); cursor: pointer;
    font-size: .85rem; padding: .15rem .4rem; margin-left: .2rem;
}
.rating-bar__remove:hover { color: var(--as-signal); border-color: var(--as-signal); }
.rating-bar__login { margin-left: auto; color: var(--as-rot); font-weight: 700; text-decoration: none; font-size: .82rem; }

/* ── Oeffentliche Kommentare (public/inc/comments-public.php) ───── */
.pcomments {
    max-width: 760px; margin: 2rem 0 1rem; padding: 1.1rem 1.2rem;
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--as-rot);
}
.pcomments__title { font-size: 1.05rem; color: var(--as-braun-dark); margin: 0 0 .8rem; }
.pcomments__count { color: var(--text-light); font-weight: 400; font-size: .9rem; }
.pcomments__empty { color: var(--text-light); font-size: .9rem; margin: .3rem 0 1rem; }
.pcomments__list { list-style: none; padding: 0; margin: 0 0 1rem; }
.pcomments__mod {
    background: #FBF1E9; border: 1px dashed var(--as-orange, #d97706);
    border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: 1rem;
}
.pcomments__mod-note { font-size: .82rem; color: var(--as-braun); margin: 0 0 .5rem; }

.pcomment {
    border: 1px solid var(--border); border-radius: 8px;
    padding: .6rem .85rem; margin-bottom: .6rem; background: #fff;
}
.pcomment--pending { border-color: var(--as-orange, #d97706); background: #FFFBF3; }
.pcomment__head { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .3rem; }
.pcomment__head strong { color: var(--as-braun-dark); }
.pcomment__date { color: var(--text-light); font-size: .78rem; margin-left: auto; }
.pcomment__body { margin: 0 0 .4rem; color: var(--as-braun-dark); white-space: pre-wrap; line-height: 1.45; font-size: .92rem; }
.pcomment__actions { display: flex; gap: .4rem; }
.pcomment__btn {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    padding: .25rem .6rem; font-size: .8rem; cursor: pointer;
    color: var(--text-light); font-family: inherit;
}
.pcomment__btn:hover { color: var(--as-braun-dark); border-color: var(--as-braun); }
.pcomment__btn--ok { color: #2d6a4f; border-color: #40916c; }
.pcomment__btn--ok:hover { background: #40916c; color: #fff; }
.pcomment__btn--warn { color: #b91c1c; border-color: #b91c1c; }
.pcomment__btn--warn:hover { background: #b91c1c; color: #fff; }

.pcomments__form { display: flex; flex-direction: column; gap: .4rem; }
.pcomments__label { font-size: .85rem; color: var(--as-braun-dark); font-weight: 700; }
.pcomments__label small { color: var(--text-light); font-weight: 400; margin-left: .3rem; }
.pcomments__form textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--border);
    border-radius: 6px; font-family: inherit; font-size: .92rem; resize: vertical;
}
.pcomments__form-bar { display: flex; align-items: center; gap: .6rem; }
.pcomments__login { color: var(--text-light); font-size: .9rem; }
.pcomments__login a { color: var(--as-rot); font-weight: 700; text-decoration: none; }

/* ═══ Webinar-Hero (Countdown-Karte auf webinar.php) ═══
   Desktop: Titel als Overlay auf dem Bild (weiss – die globale h1-Regel aus
   style.css wuerde ihn sonst dunkel aufs Bild setzen). Mobile (<=640px):
   Infoblock UEBER dem Bild in Dunkel – keine Kontrast-Probleme mehr, egal
   welches Motiv hochgeladen wird. */
.w-hero { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: var(--as-braun-dark); }
.w-hero__img, .w-hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-hero__fallback { background: linear-gradient(135deg, #652D23, #F18864); }
.w-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(55,47,44,.92) 0%, rgba(55,47,44,.35) 55%, transparent 100%); }
.w-hero__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; color: #fff; }
.w-hero__eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; margin: 0 0 .25rem; }
.w-hero__title { font-size: 1.5rem; line-height: 1.2; margin: 0 0 .4rem; color: #fff; }
.w-hero__cd { margin: 0 0 .2rem; font-weight: 700; }
.w-hero__date { margin: 0; font-size: .9rem; opacity: .85; }

@media (max-width: 640px) {
    .w-hero { padding-top: 0; background: transparent; box-shadow: none; overflow: visible; display: flex; flex-direction: column; }
    .w-hero__text { position: static; order: -1; padding: 0 0 .75rem; color: var(--as-braun-dark); }
    .w-hero__eyebrow { color: var(--as-dunkelrot); opacity: 1; }
    .w-hero__title { color: var(--as-braun-dark); font-size: 1.3rem; }
    .w-hero__date { color: var(--text-light); opacity: 1; }
    .w-hero__img, .w-hero__fallback { position: relative; inset: auto; height: auto; aspect-ratio: 16/9; border-radius: var(--radius); box-shadow: var(--shadow-md); display: block; }
    .w-hero__scrim { display: none; }
}

/* ── Meta-Row: Endorse-Bar + Rating-Bar in einer Zeile ──────────── */
/* Vorher waren beide separate volle Zeilen mit eigenem Beige-Hintergrund –
   das kostet ueber der Ueberschrift Platz. Jetzt teilen sie sich einen
   Streifen: Endorse-Info links, Rating rechts (auf Mobile untereinander). */
.meta-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .4rem 1.2rem;
    padding: .5rem .85rem;
    background: var(--as-hellbeige);
    border-radius: var(--radius);
    margin: .5rem 0 1rem;
}
.meta-row .endorse-bar,
.meta-row .rating-bar {
    background: transparent;
    padding: 0; margin: 0;
    border-radius: 0;
    flex-wrap: wrap;
}
.meta-row .rating-bar { margin-left: auto; }
/* Falls die Endorse-Bar leer ist (kein Badge, keine Berechtigung), soll die
   Rating-Bar den ganzen Platz nutzen – margin-left: auto oben regelt das
   automatisch, weil kein anderes Element vorhanden ist. */
@media (max-width: 640px) {
    .meta-row { padding: .5rem .7rem; gap: .4rem; }
    .meta-row .rating-bar { margin-left: 0; width: 100%; }
    .meta-row .rating-bar__form { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   WILLKOMMENS-WIZARD (public/willkommen.php)
   Vier Schritte beim ersten Login. Bewusst schmale Spalte – der Wizard
   soll fokussiert wirken und nicht wie eine weitere Inhaltsseite.
   ══════════════════════════════════════════════════════════════════════ */
.wiz { max-width: 620px; }
.wiz-card { padding: 1.5rem; }
.wiz-card.admin-form { margin-bottom: 0; }

.wiz-steps {
    display: flex; gap: .4rem; flex-wrap: wrap;
    list-style: none; margin: 0 0 1.5rem; padding: 0;
}
.wiz-steps__item {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: var(--text-light);
}
.wiz-steps__item + .wiz-steps__item::before {
    content: ""; width: 14px; height: 1px; background: var(--border);
}
.wiz-steps__no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--as-hellbeige); color: var(--as-braun-dark);
    font-weight: 700; font-size: .75rem;
}
.wiz-steps__item.is-current .wiz-steps__no { background: var(--as-rot); color: #fff; }
.wiz-steps__item.is-current .wiz-steps__label { color: var(--as-braun-dark); font-weight: 700; }
.wiz-steps__item.is-done .wiz-steps__no { background: var(--as-orange); color: #fff; }
@media (max-width: 560px) {
    .wiz-steps__label { display: none; }
    .wiz-steps__item + .wiz-steps__item::before { width: 10px; }
}

.wiz-list { margin: 0; padding-left: 1.1rem; line-height: 1.6; color: var(--as-braun); }
.wiz-list li { margin-bottom: .6rem; }
.wiz-list a { color: var(--as-rot); font-weight: 700; text-decoration: none; }

.wiz-actions {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.25rem;
}
.wiz-actions .btn-primary { display: inline-block; width: auto; text-decoration: none; }
.wiz-skip { color: var(--text-light); font-size: .9rem; text-decoration: underline; }

.wiz-photo { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.wiz-photo img,
.wiz-photo__ph {
    width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--as-sand); flex-shrink: 0;
}
.wiz-photo__ph {
    background: var(--as-hellbeige);
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
}

/* Auswahl "Aus Vorlage / Freihand" – eigene Pills, damit der Wizard ohne
   konfigurator.css auskommt. */
.wiz-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.wiz-pill { position: relative; cursor: pointer; }
.wiz-pill input { position: absolute; opacity: 0; pointer-events: none; }
.wiz-pill span {
    display: inline-block; padding: .45rem .9rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: #fff; font-size: .88rem; color: var(--as-braun);
}
.wiz-pill input:checked + span { background: var(--as-rot); border-color: var(--as-rot); color: #fff; font-weight: 700; }
.wiz-pill input:focus-visible + span { outline: 2px solid var(--as-orange); outline-offset: 2px; }

.wiz-dims { display: flex; gap: .6rem; flex-wrap: wrap; }
.wiz-dims label { flex: 1 1 130px; }