/* Overview /referenzen (generated by scripts/gen-referenzen.mjs): head, the KI case cards with the shorter
   KI entries, further projects as screenshot cards. Case cards come from site.css, the call to action from
   referenz.css. */

.ue-head { padding: calc(72px + 12vh) var(--pad) 6vh; }
.ue-head .mono, .ue-ki > .mono, .ue-projekte > .mono { color: var(--deep); }
.ue-head h1 { margin-top: 14px; max-width: 14ch; font-weight: 500; font-size: clamp(44px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.045em; }
.ue-head .lede { margin-top: 24px; max-width: 46ch; font-size: 19px; line-height: 1.55; color: var(--ink-2); }

.ue-ki, .ue-projekte { padding: 6vh var(--pad) 12vh; }
.ue-ki .fallkarten { margin-top: 18px; }
.ue-weitere { list-style: none; margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ue-weitere li { display: grid; align-content: start; gap: 6px; padding: 22px 24px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card, transparent); }
.ue-weitere b { font-weight: 500; font-size: 20px; letter-spacing: -0.015em; }
.ue-weitere .mono { color: var(--deep); }
.ue-weitere p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.ue-projekte { border-top: 1px solid var(--rule); padding-top: 12vh; }
.ue-projekte h2 { margin-top: 12px; max-width: 20ch; font-weight: 500; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -0.035em; }
.projekte { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 22px; }
.projekt { display: grid; align-content: start; gap: 8px; }
.projekt img { width: 100%; height: auto; display: block; margin-bottom: 12px; border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 22px 44px -28px rgba(10,16,29,0.5); transition: transform .5s var(--ease); }
.projekt:hover img, .projekt:focus-visible img { transform: translateY(-6px); }
.projekt .mono { color: var(--deep); }
.projekt b { font-weight: 500; font-size: 22px; letter-spacing: -0.02em; }
.projekt p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.projekt-link { display: inline-block; padding: 8px 0; font-size: 14px; color: var(--deep); }
.projekt-link.is-ended { color: var(--ink-2); }

@media (max-width: 900px) {
  .projekte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ue-weitere { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .projekte { grid-template-columns: 1fr; }
}