/* Xtrackers / 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.
   Leseflächen bleiben ruhig: keine Lichtkugeln, kein Lichtpunkt unter dem Zeiger, kein Außenschein.
   glass.css ergänzt seit 2026-09-06 die ausdrücklich gewünschte Refraction auf Kopfleiste und Suche.
   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/xtrackers/bg_purpur-nacht.svg) 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(23, 18, 36, 0.80) 0%, rgba(23, 18, 36, 0.80) 55%, rgba(23, 18, 36, 0.88) 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: 12px; border-radius: var(--stg-radius-surface);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%), var(--glass-fill);
  -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);
  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%), var(--glass-fill-strong);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 14px 36px rgba(4, 8, 14, 0.32);
  padding-top: 7px; padding-bottom: 7px;
}
/* Firmen- und Produktmarke bilden einen gemeinsamen Link zum Hub. */
.hub .topbar .brand { flex: none; gap: 20px; color: var(--stg-sand-500); text-decoration: none; }
.hub .topbar .brand img { height: 26px; }
.hub .topbar .product-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1; white-space: nowrap; }
.hub .topbar .product-brand img { width: 26px; height: 26px; flex: none; }
.hub .topbar .product-brand .nm { color: var(--ui-white); }
.hub .topbar .brand:focus-visible { outline: 2px solid var(--stg-sand-500); outline-offset: 5px; border-radius: 2px; }
.hub .navseg { display: flex; align-items: center; gap: 12px; }
.hub .wrap { padding-top: 40px; }

/* ── Kurzer Inhalts-Fade; auch lange Listen stehen nach höchstens 235 ms. ── */
.hub .reveal { opacity: 0; animation: hub-content-in .26s var(--ease-out) forwards; animation-delay: min(calc(var(--i, 0) * 15ms),75ms); }
.hub .grid.quick .reveal { animation-duration: .12s; animation-delay: min(calc(var(--i, 0) * 10ms),50ms); }
/* The page loader reveals the completed layout in one transition. */
html[data-stg-loader-mounted] .hub .reveal { opacity: 1; animation: none; }
@keyframes hub-content-in { to { opacity: 1; } }

/* ── Werkzeugleiste: EIN Glas-Container mit flachen Segmenten, Fokus zeigt den Sand-Rand ── */
.toolbar {
  display: flex; align-items: stretch; gap: 8px; margin: 30px 0 28px; padding: 4px; border-radius: var(--stg-radius-surface);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 50%), var(--glass-fill);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: var(--stg-field-transition);
}
.toolbar:hover { border-color: var(--glass-line-hover); }
.toolbar:focus-within { border-color: var(--stg-field-focus-border); box-shadow: var(--stg-field-focus-shadow); }
@media (forced-colors: active) { .toolbar:focus-within { outline: 2px solid Highlight; outline-offset: 3px; } }
.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(--ui-quiet); }
.toolbar .search input::-webkit-search-cancel-button, .toolbar .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.toolbar .search .clear { flex: none; opacity: 0; pointer-events: none; }
.toolbar.hasq .search .clear { opacity: 1; pointer-events: auto; }
.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: var(--stg-radius-control); background-position: right 14px center; transition: var(--stg-field-transition), color var(--stg-field-focus-duration) var(--stg-field-focus-ease); }
.toolbar .seg select.input:hover { color: #fff; background-color: rgba(var(--glow-rgb), 0.1); border-color: var(--glass-line-hover); }
.toolbar .seg select.input:focus { box-shadow: none; background-color: rgba(238, 132, 73, 0.1); border-color: var(--stg-field-focus-border); }

/* ── 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 { flex: none; }
.sechead .secact { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Karten: Bild bündig am oberen Rand, Innenabstand nur für Text und Aktionen. ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.card {
  display: flex; flex-direction: column; position: relative; border-radius: var(--stg-radius-surface); overflow: hidden; padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 32%), var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35);
  border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), 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 { border-color: var(--glass-line-hover); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 32%), var(--glass-fill-hover); }
.card:active { transform: none; }
a.cardlink { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; outline: none; }
.card:has(> .cardlink:focus-visible) { outline: 2px solid var(--stg-sand-500); outline-offset: 3px; }
/* Eigene obere Rundung bleibt auch bei offenem Versionsmenü erhalten (Karte overflow: visible). */
.card .thumb { position: relative; aspect-ratio: 16 / 9; background: var(--stg-workspace-background); overflow: hidden; border-radius: calc(var(--stg-radius-surface) - 1px) calc(var(--stg-radius-surface) - 1px) 0 0; }
.card .thumb img { position: absolute; inset: 32px; width: calc(100% - 64px); height: calc(100% - 64px); object-fit: contain; object-position: center; display: block; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28)); }
.card .thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.28); }
.card .thumb .ph .brand-placeholder { position:static; width:min(160px,52%); height:auto; object-fit:contain; filter:none; }
.card .thumb .role { position: absolute; top: 10px; right: 10px; max-width: calc(35% - 10px); }
.card .body { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 20px; flex: 1; }
.card:has(.cardfoot) .body { padding-bottom: 10px; }
.card .body h3 { font-size: 20px; line-height: 1.22; color: #fff; margin: 0; overflow-wrap: anywhere; }
.card .body p { font-size: 14px; line-height: 1.5; color: var(--ui-muted); 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(--ui-muted); }
.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; flex-wrap: wrap; gap: 12px; align-items: center; padding: 2px 18px 16px; position: relative; }
.card .download-status { flex-basis: 100%; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.card .archlist {
  display: none; position: absolute; left: 18px; bottom: calc(100% + 8px); min-width: min(250px, calc(100% - 36px)); max-width: calc(100% - 36px); padding: 6px; z-index: 6; border-radius: var(--stg-radius-surface);
  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 { justify-content: space-between; gap: 16px; }
.card .archlist a span { min-width: 0; overflow-wrap: anywhere; }
.card .archlist a span:last-child { color: var(--ui-muted); }
.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: var(--stg-radius-compact); 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): separate Buttons, keine gemeinsame Kapsel ── */
.hub .tabs { display: inline-flex; gap: 8px; flex-wrap: wrap; max-width: 100%; margin: 30px 0 22px; padding: 0; background: none; border: 0; box-shadow: none; }

/* ── Fallbacks ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hub .topbar, .hub .topbar.scrolled, .toolbar { background: rgba(23, 18, 36, 0.94); }
  .card, .card:hover { background: rgba(23, 18, 36, 0.92); }
  .card .archlist { background: rgba(23, 18, 36, 0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .hub .topbar, .toolbar, .card, .card .archlist { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--stg-ink-900); }
  .ambient video.motif { display: none; }
  .ambient .scrim { background: linear-gradient(180deg, rgba(23, 18, 36, 0.84) 0%, rgba(23, 18, 36, 0.9) 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; }
}
/* Navigation bekommt unterhalb der Desktopbreite eine eigene Zeile. */
@media (max-width: 1000px) {
  .hub .topbar { flex-wrap: wrap; }
  .hub .topbar .spacer { order: 1; }
  .hub .topbar .userchip { order: 2; margin-left: auto; max-width: calc(100% - 230px); }
  .hub .topbar > .btn:not(.userchip) { order: 3; flex: 1 1 auto; }
  .hub .navseg { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 8px; order: 3; }
  .hub .navseg .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; white-space: normal; text-align: center; }
}
@media (max-width: 560px) {
  .hub .topbar .userchip { flex: 0 0 44px; width: 44px; height: 44px; max-width: 44px; padding: 6px; gap: 0; }
  /* Der Name bleibt für assistive Technik verfügbar, das Account-Menü unverändert. */
  .hub .topbar .userchip > span:not(.avatar) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 380px) {
  .hub .topbar .brand { gap: 14px; }
  .hub .topbar .brand > img { height: 23px; }
  .hub .topbar .product-brand { font-size: 15px; gap: 6px; }
  .hub .topbar .product-brand img { width: 24px; height: 24px; }
}
@media (max-width: 720px) {
  .toolbar { flex-wrap: wrap; border-radius: var(--stg-radius-surface); }
  .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; }
  .hub .topbar { top: 8px; margin-top: 8px; padding-left: 14px; }
  .hub .layout > * { min-width: 0; }
  .hub .matrix { display: block; max-width: 100%; overflow-x: auto; }
  .hub .list .li.user > :nth-child(n + 3) { grid-column: 2; }
  .hub .list .li.user .row { justify-content: flex-start !important; }
  .hub .list .li:not(.user) { grid-template-columns: minmax(0, 1fr) !important; }
  .hub .list .li .actions { justify-content: flex-start; gap: 12px; }
}
@media (max-width: 640px) { .hub .btn { max-width: 100%; white-space: normal; } .sechead { flex-wrap: wrap; } .sechead .secact { flex-basis: 100%; margin-left: 0; } }

@media (max-width: 380px) { .hub .h-display { font-size: clamp(26px, 8vw, 30px); overflow-wrap: anywhere; } }

@media (pointer: coarse) {
  .hub .topbar .brand, .hub .userchip { min-height: 44px; }
  .hub .tabs button, .card .archlist a { min-height: 44px; }
  .toolbar .search { padding: 4px 10px; }
  .toolbar .search input, .toolbar .seg select.input { min-height: 44px; }
  .toolbar .search .clear { width: 44px; height: 44px; }
}
/* Im Querformat bzw. über der Bildschirmtastatur bleibt Platz für den Inhalt. */
@media (pointer: coarse) and (max-height: 500px) { .hub .topbar { position: relative; top: 0; } }

/* Xtrackers workspace identity */
.ambient{background-color:#241B39}.ambient .motif{opacity:.75}.ambient .scrim{background:linear-gradient(135deg,rgba(23,18,36,.45),rgba(23,18,36,.78))}
.hub .topbar .brand>img{width:132px;height:auto;object-fit:contain}.hub .topbar .product-brand{font-family:"DWS Sans",sans-serif;font-size:19px}.hub .topbar .product-brand>img{display:none}
.hub h1,.hub .sechead h2,.hub .sheet h2{font-family:"DWS Slab",Georgia,serif;font-weight:400;letter-spacing:0;text-transform:none}
.hub h1::before,.hub h2::before,.hub h3::before{content:none!important}.brand-top img{width:180px!important;height:auto!important;object-fit:contain}.brand-plus{display:none!important}
@media(max-width:560px){.hub .topbar .brand>img{width:112px;height:auto}.hub .topbar .brand{gap:12px}.hub .topbar .product-brand{font-size:17px}}