/* salestech group / Presentation Hub — Seitenhülle für Hub, Login, Admin und Create (Liquid Glass im stg-Design, ruhige Fassung).
   Ebenen: Wellen-Loop als Video mit Scrim ganz unten (Inhalt-Ebene, Standbild als Poster und Fallback), Karten als Glaskacheln darüber,
   Glas auf der Bedienebene: schwebende Kopfleiste, Werkzeugleiste, Tabs, Menüs, Dialoge.
   Ruhe (Nutzerwunsch 2026-09-05): keine Lichtkugeln, kein Lichtpunkt unter dem Zeiger, kein Außenschein, keine Linse.
   Bewegung: der Wellen-Loop (seit 2026-09-06 wieder, volle Deckkraft, Nutzerwunsch), kurzer Aufbau beim Laden, leichte Tönung beim Hover.
   Lädt NICHT im Deck. Klassen aus ui.css werden hier nur für Hub-Seiten ergänzt (.hub …). */
html { background: var(--stg-ink-900); }
body.hub { background: transparent; }

/* ── Motiv-Ebene: Wellen-Loop (Video) über dem Standbild, das als Poster, Fallback und Reduced-Motion-Bild dient, darüber der Scrim ── */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--stg-ink-900) url(/shared/assets/backgrounds/bg-wave-tall.jpg) center / cover no-repeat; }
.ambient .motif { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; }
.ambient .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 28, 38, 0.18) 0%, rgba(30, 40, 55, 0.3) 45%, rgba(20, 28, 38, 0.72) 100%); }

/* ── Kopfleiste: schwebendes Glas, verdichtet sich beim Scrollen ── */
.hub .topbar {
  position: sticky; top: 12px; z-index: 40;
  width: calc(100% - 2 * clamp(16px, 3vw, 40px)); max-width: 1240px; margin: 12px auto 0;
  padding: 10px 12px 10px 20px; gap: 10px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%), rgba(30, 40, 55, 0.42);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(200, 181, 154, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2), padding var(--dur-2);
}
.hub .topbar.scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%), rgba(20, 28, 38, 0.7);
  border-color: rgba(200, 181, 154, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 36px rgba(4, 8, 14, 0.32);
  padding-top: 7px; padding-bottom: 7px;
}
.hub .topbar .brand img { height: 26px; }
.hub .topbar .btn { padding: 8px 14px; font-size: 13.5px; }
.hub .navseg { display: flex; align-items: center; gap: 6px; }
.hub .wrap { padding-top: 40px; }

/* ── Aufbau: kurz und leise von unten, per --i versetzt (hub.js stagger) ── */
.hub .reveal { opacity: 0; transform: translateY(8px); animation: hub-rise .5s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 50ms); }
.hub .grid.quick .reveal { animation-duration: .3s; animation-delay: calc(var(--i, 0) * 20ms); }
@keyframes hub-rise { to { opacity: 1; transform: none; } }

/* ── Werkzeugleiste: EIN Glas-Container mit flachen Segmenten, Fokus zeigt den Sand-Rand ── */
.toolbar {
  display: flex; align-items: stretch; gap: 4px; margin: 30px 0 28px; padding: 4px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 50%), rgba(30, 40, 55, 0.44);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(200, 181, 154, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2);
}
.toolbar:hover { border-color: rgba(200, 181, 154, 0.3); }
.toolbar:focus-within { border-color: rgba(200, 181, 154, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 4px rgba(200, 181, 154, 0.1); }
.toolbar .seg { display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-width: 0; }
.toolbar .seg:not(.search) { padding: 2px; }
.toolbar .search { flex: 1 1 280px; padding-left: 18px; cursor: text; }
.toolbar .search svg { width: 16px; height: 16px; flex: none; stroke: var(--stg-sand-500); }
.toolbar .search input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 15px; min-width: 0; }
.toolbar .search input::placeholder { color: var(--stg-ink-400); }
.toolbar .search input::-webkit-search-cancel-button, .toolbar .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.toolbar .search .clear { width: 24px; height: 24px; flex: none; padding: 0; border-radius: 50%; border: 1px solid rgba(200, 181, 154, 0.25); background: rgba(255, 255, 255, 0.05); color: var(--stg-sand-200); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--dur-1), background var(--dur-1); }
.toolbar .search .clear svg { width: 10px; height: 10px; stroke: currentColor; }
.toolbar .search .clear:hover { background: rgba(200, 181, 154, 0.16); color: #fff; }
.toolbar.hasq .search .clear { opacity: 1; pointer-events: auto; }
.toolbar .search kbd { font: inherit; font-size: 11px; line-height: 1; color: var(--stg-ink-400); border: 1px solid rgba(200, 181, 154, 0.2); border-radius: 6px; padding: 3px 7px; }
.toolbar.hasq .search kbd, .toolbar:focus-within .search kbd { display: none; }
.toolbar .seg select.input { width: auto; height: 100%; background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.04); box-shadow: none; padding: 8px 34px 8px 16px; font-size: 14px; color: var(--stg-sand-200); border-radius: 999px; background-position: right 14px center; transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.toolbar .seg select.input:hover { color: #fff; background-color: rgba(var(--glow-rgb), 0.1); border-color: rgba(var(--glow-rgb), 0.24); }
.toolbar .seg select.input:focus { box-shadow: none; background-color: rgba(200, 181, 154, 0.1); border-color: rgba(200, 181, 154, 0.3); }

/* ── Abschnitte ── */
.dashsec { margin-bottom: 54px; }
.sechead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sechead h2 { font-size: 24px; color: #fff; margin: 0; }
.sechead .seccount { font-size: 12.5px; line-height: 1; color: var(--stg-sand-500); white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: rgba(200, 181, 154, 0.08); border: 1px solid rgba(200, 181, 154, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.sechead .secact { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Karten: Glaskacheln mit eingerücktem Bild. Hover tönt leicht und hebt zwei Pixel, mehr nicht. ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.card {
  display: flex; flex-direction: column; position: relative; border-radius: 22px; overflow: hidden; padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 32%), rgba(30, 40, 55, 0.48);
  -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35);
  border: 1px solid rgba(200, 181, 154, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px rgba(4, 8, 14, 0.18);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), background var(--dur-2);
}
.card:hover { transform: translateY(-2px); border-color: rgba(var(--glow-rgb), 0.4); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 32%), rgba(34, 46, 63, 0.56); }
.card:active { transform: none; }
a.cardlink { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; outline: none; }
a.cardlink:focus-visible { box-shadow: inset 0 0 0 2px var(--stg-sand-500); border-radius: 16px; }
.card .thumb { position: relative; aspect-ratio: 16 / 9; background: rgba(20, 28, 38, 0.55); overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.28); }
.card .thumb .ph svg { width: 54px; height: auto; }
.card .thumb .badge { position: absolute; top: 10px; left: 10px; background: var(--stg-sand-500); color: var(--stg-ink-900); font-size: 11.5px; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.card .thumb .role { position: absolute; top: 10px; right: 10px; background: rgba(20, 28, 38, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--stg-sand-200); font-size: 11px; text-transform: uppercase; border-radius: 999px; padding: 5px 10px; border: 1px solid rgba(200, 181, 154, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.card .body { display: flex; flex-direction: column; gap: 8px; padding: 14px 8px 10px; flex: 1; }
.card .body h3 { font-size: 20px; line-height: 1.22; color: #fff; margin: 0; }
.card .body p { font-size: 14px; line-height: 1.5; color: var(--stg-ink-300); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--stg-ink-300); }
.card .meta b { color: var(--stg-sand-500); font-variant-numeric: tabular-nums; }
.card .meta .open { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--stg-sand-500); }
.card .meta .open svg { width: 13px; height: 13px; stroke: var(--stg-sand-500); }
.card .cardfoot { display: flex; gap: 8px; align-items: center; padding: 2px 8px 6px; position: relative; }
.card .archlist {
  display: none; position: absolute; left: 8px; bottom: calc(100% + 8px); min-width: 250px; padding: 6px; z-index: 6; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%), var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 50px rgba(4, 8, 14, 0.5);
  transform-origin: bottom left;
}
.card .arch.open .archlist { display: block; animation: ui-pop var(--dur-2) var(--ease-out) both; }
.card .archlist a { display: flex; justify-content: space-between; gap: 16px; color: var(--stg-sand-200); text-decoration: none; font-size: 13px; padding: 8px 11px; border-radius: 10px; transition: background var(--dur-1), color var(--dur-1); }
.card .archlist a span:last-child { color: var(--stg-ink-300); }
.card .archlist a:hover { background: rgba(var(--glow-rgb), 0.12); color: #fff; }
.card .archbtn svg { width: 9px; height: 6px; transition: transform var(--dur-2) var(--ease-out); }
.card .arch.open .archbtn svg { transform: rotate(180deg); }
/* Karte mit offenem Versionsmenü über die Nachbarn heben */
.card.archopen, .card:has(.arch.open) { z-index: 5; overflow: visible; }

/* ── Skeleton beim Laden: Karten-Silhouetten mit Lichtlauf ── */
.skel .card { pointer-events: none; }
.skel .card .thumb, .skel .card .ln { background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%); background-size: 200% 100%; animation: hub-shimmer 1.6s linear infinite; }
.skel .card .ln { display: block; height: 14px; border-radius: 7px; margin: 6px 0; }
.skel .card .ln.t { height: 20px; width: 70%; margin-top: 2px; }
.skel .card .ln.s { width: 45%; }
@keyframes hub-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Tabs (Admin): Segmente in einem Glas-Container ── */
.hub .tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; margin: 30px 0 22px; padding: 4px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 50%), rgba(30, 40, 55, 0.44);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(200, 181, 154, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.hub .tabs button { background: transparent; border: 0; color: var(--stg-ink-300); border-radius: 999px; padding: 9px 18px; cursor: pointer; font-size: 14px; transition: background var(--dur-1), color var(--dur-1); }
.hub .tabs button:hover { color: #fff; background: rgba(var(--glow-rgb), 0.1); }
.hub .tabs button.on { background: rgba(200, 181, 154, 0.16); color: var(--stg-sand-500); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* ── Fallbacks ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hub .topbar, .hub .topbar.scrolled, .toolbar, .hub .tabs { background: rgba(20, 28, 38, 0.94); }
  .card, .card:hover { background: rgba(20, 28, 38, 0.92); }
  .card .archlist, .card .thumb .role { background: rgba(20, 28, 38, 0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .hub .topbar, .toolbar, .card, .card .archlist, .card .thumb .role, .hub .tabs { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--stg-ink-900); }
  .ambient video.motif { display: none; }
  .ambient .scrim { background: linear-gradient(180deg, rgba(20, 28, 38, 0.5) 0%, rgba(20, 28, 38, 0.82) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::before, .hub *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hub .reveal { opacity: 1; transform: none; }
  .card:hover { transform: none; }
  .ambient video.motif { display: none; }
}
@media (max-width: 720px) {
  .toolbar { flex-wrap: wrap; border-radius: 22px; }
  .toolbar .search { flex-basis: 100%; }
  .toolbar .seg:not(.search) { flex: 1; justify-content: center; }
  .toolbar .seg:not(.search) select.input { width: 100%; text-align: center; }
  .toolbar .search kbd { display: none; }
  .hub .topbar { top: 8px; margin-top: 8px; padding-left: 14px; }
}
@media (max-width: 640px) { .hub .navseg { display: none; } .sechead { flex-wrap: wrap; } .sechead .secact { flex-basis: 100%; margin-left: 0; } }