/* ==========================================================================
   page-arbeiten.css · Hub /arbeiten/ und /en/work/
   Karten (.wcard) und Raster (.wgrid[data-layout]) kommen aus site.css §11.
   Hier nur: Kopf, Filterleiste, Abschnitte, Leerzustand, Legende, Abschluss.
   ========================================================================== */

/* Kopf */
.hub-hero { padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.hub-title { display: grid; gap: 0.9rem; margin-top: 0.75rem; }
.hub-t { font-size: var(--t-mega); font-weight: 900; letter-spacing: -0.035em; line-height: 0.9; }
.hub-colon { color: var(--acc); }
.hub-sub { font-family: var(--f-mono); font-weight: 400; font-size: 0.95rem; letter-spacing: 0; line-height: 1.4; color: var(--muted); }
.hub-intro { display: grid; gap: 0.6rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 40em; color: var(--muted); }
.hub-intro .lead { color: var(--ink); }
.hub-body { padding-bottom: clamp(4rem, 8vw, 6.5rem); }

/* Filterleiste: native Radios (Art) + Checkboxen (Filmart), als Chips gestylt */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2.25rem;
  padding-block: 0.85rem; margin-bottom: clamp(2.5rem, 5vw, 4rem);
  background: var(--petrol); border-block: 1px solid var(--line-soft);
}
/* Platz der Filterleiste schon vor dem Seiten-JS reservieren (sonst springt das Raster beim Einblenden, CLS ≈ 0,04); ohne JS bleibt sie ausgeblendet */
@media (scripting: enabled) { .filters[data-filters][hidden] { display: flex !important; visibility: hidden; } }
.f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.f-legend { float: left; margin-right: 0.45rem; padding: 0; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.f-count { flex: 1 1 8rem; min-width: 8rem; margin-left: auto; text-align: right; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* einzeilig: die Leiste springt nicht */
/* Mobil: alle Chips in EINER horizontal scrollbaren Reihe (≤ 56 px), Legenden und Zähler nur für Screenreader;
   die Zahl je Abschnitt steht ohnehin in der Abschnitts-Überschrift */
@media (max-width: 759px) {
  .filters { position: relative; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none;
    padding-block: 0.55rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
  .filters::-webkit-scrollbar { display: none; }
  .f-row { flex-wrap: nowrap; gap: 0.35rem; flex: none; }
  .f-row + .f-row { padding-left: 0.6rem; margin-left: 0.25rem; border-left: 1px solid var(--line); }
  .f-legend, .f-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; float: none; }
  .f-row .chip { flex: none; padding: 0 0.6rem; letter-spacing: 0.05em; scroll-snap-align: start; }
  .f-row .chip-l { gap: 0; }
  .f-row .chip-l::before { display: none; }   /* mobil trägt die Fläche den Zustand, der Punkt kostet Breite */
  .hub-hero { padding-bottom: 1.25rem; }
  .hub-intro { margin-top: 0.9rem; }
}

/* Abschnitte: Kundenprojekte (Haarlinie) · Concept Films (gestrichelt) */
.hub { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }
/* Abschnitts-H2 im Mono-Label-Look (echte Überschrift: Kunden und Specs bleiben für Crawler getrennt) */
.hub-sec-label { display: flex; align-items: center; gap: 0.75rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; color: var(--muted); }
.hub-sec-h { font: inherit; font-weight: 500; letter-spacing: inherit; color: var(--ink); }
.hub-sec--spec .hub-sec-label { border-bottom-style: dashed; }
.hub-sec-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.hub-more { margin-top: 2rem; }
[data-more-hidden] { display: none !important; }

/* Leerzustand (nur bei 0 Treffern) */
.hub-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 2rem 0; color: var(--muted); border-top: 1px dashed var(--line); }

/* Hinweise und Tiefe */
.hub-notes { display: grid; gap: 0.35rem; margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 46em; font-size: var(--t-small); color: var(--muted); }
/* Leistungszeile: beschreibende Inhaltslinks auf die Leistungsseiten (W5/T-02), außerhalb des Generator-Markers; Menü bleibt bei 4 Punkten */
.hub-svc { margin-top: 1.25rem; }
.hub-svc-k { width: 100%; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 760px) { .hub-svc-k { width: auto; } }
.hub-deep { margin-top: 2rem; }
.legend { display: grid; width: 100%; margin-bottom: 0.5rem; }
.legend li { display: grid; gap: 0.5rem 1.75rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--line-soft); }
.legend li .tag { justify-self: start; }
.legend li p { color: var(--muted); max-width: 40em; }
@media (min-width: 700px) { .legend li { grid-template-columns: 13rem minmax(0, 1fr); } }

/* Abschluss (Sand) */
.hub-cta-in { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem 3rem; }
.hub-cta-in .col { max-width: 40rem; }
.hub-cta-in .lead { color: var(--muted); }
.hub-cta-in .hero-ctas { margin-top: 0; }