/* levels. — Portfolio
   Ergaenzt style.css. Die geteilten Klassen (display, grad, mono, cta-*, reveal,
   footer-nav, footer-link) kommen aus style.css. */

.work-body {
  margin: 0;
  background: #05060c;
  color: #eaf0ff;
  font-family: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.wk-page { padding: 26px 20px 40px; min-height: 100vh; }
.wk-container { width: 100%; }

.wk-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 44px; }
.wk-logo { height: 22px; width: auto; display: block; }

.wk-title { font-size: clamp(46px, 11vw, 150px); line-height: 0.92; margin: 0 0 18px; }
.wk-title-grad { display: inline; }
.wk-intro { max-width: 44ch; margin: 0 0 56px; font-size: 20px; line-height: 1.6; color: #a9b3cf; }

.wk-cats { display: grid; gap: 72px; }
.wk-cat { display: grid; gap: 22px; }
.wk-cat-title { font-size: clamp(34px, 6vw, 76px); line-height: 1; margin: 0; color: #eaf0ff; transition: color 0.3s ease, text-shadow 0.3s ease; }
.wk-cat-glow { color: #7c5cff; text-shadow: 0 0 40px #7c5cffa6; }

.wk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.wk-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; border: 1px solid #eaf0ff14; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, opacity 0.7s cubic-bezier(0.22,1,0.36,1); }
.wk-img:hover { transform: translateY(-6px); box-shadow: 0 18px 60px #7c5cff59; }

.wk-cta { text-align: center; padding: 110px 0 30px; }
.wk-cta-head { font-size: clamp(34px, 6vw, 76px); line-height: 1; margin: 0; }
.wk-cta-btn { margin-top: 30px; display: flex; justify-content: center; }

.wk-footer { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid #eaf0ff14; margin-top: 40px; padding-top: 22px; }

@media (min-width: 768px) {
  .wk-page { padding: 34px 40px 60px; }
  .wk-logo { height: 34px; }
  .wk-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .wk-intro { font-size: 22px; }
  .wk-footer { flex-direction: row; align-items: center; justify-content: space-between; }
}