/* ==========================================================================
   Landingpages für Unterlagen (/ki-architektur), Präfix ua-
   --------------------------------------------------------------------------
   Formular und Seitenspalte kommen von /kontakt (kn-* aus site.css und
   pages/kontakt-neu.css, wird vorher geladen). Hier steht nur der Kopf:
   Text links, das Deckblatt rechts.
   ========================================================================== */

.ua-hero { padding-bottom: 72px; }
.ua-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  gap: 72px; align-items: center; }
.ua-hero .lead { margin-top: 28px; max-width: 620px; }

.ua-wege { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; max-width: 620px; }
.ua-wege li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px;
  align-items: start; font-size: 15.5px; line-height: 1.55; color: var(--fg-1); }
.ua-wege svg { margin-top: 4px; color: var(--primary); }
.ua-wege strong { font-weight: 700; }

.ua-deckblatt { margin: 0; justify-self: center; width: 100%; max-width: 380px; }
.ua-deckblatt img { display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 30px 60px -20px hsl(262 60% 20% / .35), 0 0 0 1px var(--border-1); }

/* Abgelaufener Link: ein Band über der Überschrift, nicht eine Zeile im
   Formular, die übersah man. Ton der Marke, kein Rot: es ist kein Fehler. */
.ua-abgelaufen { display: flex; align-items: center; gap: 20px; margin: 0 0 56px;
  padding: 22px 28px; border-radius: 16px; background: var(--accent);
  border: 1px solid hsl(var(--h-primary) / .35); box-shadow: 0 12px 30px -18px hsl(var(--h-primary) / .5); }
.ua-abgelaufen-icon { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--primary); color: #fff; }
.ua-abgelaufen-text { flex: 1 1 auto; min-width: 0; }
.ua-abgelaufen strong { display: block; font-size: 20px; font-weight: 700; color: var(--fg-1); }
.ua-abgelaufen p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-1); }
.ua-abgelaufen .btn { flex: 0 0 auto; }

/* Falle für Bots: aus dem Fluss, nicht per display:none, das erkennen manche. */
.ua-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 980px) {
  .ua-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ua-deckblatt { max-width: 280px; justify-self: start; }
}

@media (max-width: 640px) {
  .ua-hero { padding-bottom: 48px; }
  .ua-abgelaufen { flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 20px; margin-bottom: 40px; }
  .ua-abgelaufen-text { flex-basis: calc(100% - 64px); }
  .ua-deckblatt { max-width: 160px; }
}