/* Zusatz-Styles für relationale Collections (Blog/Work), passend zum ZEC-Brand.
   Ergänzt das self-hosted Webflow-CSS; nutzt dieselben Tokens (Dark, ZEC-Orange). */

/* --- Blog-Meta (Autor / Lesezeit) --- */
.zec-blog-meta { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.zec-blog-author-img { border-radius: 999px; object-fit: cover; width: 44px; height: 44px; background: #221c19; }
.zec-blog-author-name { color: #fff; font-weight: 600; font-size: 15px; }
.zec-blog-meta-line { color: rgba(255,255,255,.6); font-size: 14px; }

/* --- Blog-Hauptbild --- */
.zec-blog-image-section { padding: 32px 0 8px; }
.zec-blog-main-image { width: 100%; height: auto; border-radius: 16px; display: block; }

/* --- Blog-Body: Lesebreite begrenzen --- */
.zec-blog-body { max-width: 760px; margin-left: auto; margin-right: auto; }
.zec-blog-body h3 { color: #fff; margin-top: 1.6em; }
.zec-blog-cta { display: flex; justify-content: center; padding: 40px 0 8px; }

/* --- Blog-/Work-Übersicht: Karten-Grid --- */
.zec-coll-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px;
}
@media screen and (max-width: 991px) { .zec-coll-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 767px) { .zec-coll-grid { grid-template-columns: 1fr; } }
.zec-coll-card {
  display: flex; flex-direction: column; background: #221c19; border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; overflow: hidden; text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.zec-coll-card:hover { border-color: #fd4a00; transform: translateY(-4px); }
.zec-coll-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #111; }
.zec-coll-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.zec-coll-card-tag { color: #fd4a00; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.zec-coll-card-title { color: #fff; font-size: 19px; font-weight: 600; line-height: 1.3; margin: 0; }
.zec-coll-card-text { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.55; margin: 0; }
.zec-coll-card-meta { color: rgba(255,255,255,.45); font-size: 13px; margin-top: auto; }
.zec-coll-empty { color: rgba(255,255,255,.6); margin-top: 32px; }

/* --- Zusätzliche Header-Nav-Links (Über Uns / Blog) --- */
a.header-nav-extra { text-decoration: none; color: #fff; display: inline-flex; align-items: center; transition: color .2s ease; }
a.header-nav-extra:hover { color: #fd4a00; }
@media screen and (max-width: 991px) {
  /* im mobilen Menü unter den Leistungen-Eintrag stapeln */
  a.header-nav-extra { display: block; padding: 8px 0; }
}

/* --- Prozess-Karten („In drei Phasen…"): kompakte Abstände statt der
   riesigen 200px-Grid-Gaps aus dem Webflow-CSS. --- */
.process-card { grid-row-gap: 14px !important; row-gap: 14px !important; justify-content: flex-start !important; }
.process-phase-number { margin-bottom: 6px !important; }
.process-phase-title { margin-bottom: 6px !important; }
.process-phase-desc { margin-bottom: 12px !important; }