.error-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.error-page { flex: 1; padding: clamp(56px, 10vw, 128px) 0; }
.error-container { max-width: 780px; text-align: center; }
.error-code { margin: 0 0 16px; color: var(--terracotta-dark); font-size: clamp(36px, 8vw, 88px); font-family: var(--font-display); line-height: 1.1; }
.error-page h1 { margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(28px, 5vw, 44px); line-height: 1.2; }
.error-description { max-width: 55ch; margin: 0 auto 32px; font-size: 17px; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.error-actions button { font: inherit; cursor: pointer; }
.error-hint, .error-connection { max-width: 60ch; margin: 24px auto 0; color: var(--gray-dark); font-size: 14px; }
.error-connection:empty { display: none; }
.error-footer { padding: 24px 0; border-top: 1px solid var(--border); font-size: 13px; text-align: center; color: var(--gray-dark); }
.error-page a:focus-visible, .error-page button:focus-visible { outline: 2px solid var(--terracotta-dark); outline-offset: 4px; }
.error-page [hidden] { display: none; }
@media (max-width: 480px) {
  .error-actions { flex-direction: column; }
  .error-actions .button { justify-content: center; }
}