diff --git a/backend/workflows/templates/workflows/errors/error_page.html b/backend/workflows/templates/workflows/errors/error_page.html
index c3340c2..b745642 100644
--- a/backend/workflows/templates/workflows/errors/error_page.html
+++ b/backend/workflows/templates/workflows/errors/error_page.html
@@ -3,29 +3,349 @@
 
 {% block title %}{{ error_title }}{% endblock %}
 
+{% block extra_head %}
+  <style>
+    .error-page-shell {
+      width: min(1180px, 100%);
+      margin: 0 auto;
+      padding-top: 28px;
+      padding-bottom: 36px;
+      gap: 22px;
+    }
+
+    .error-hero {
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(0, 1.2fr) minmax(260px, 360px);
+      gap: 28px;
+      align-items: center;
+      padding: 34px;
+      overflow: hidden;
+      border: 1px solid rgba(216, 226, 239, 0.94);
+      border-radius: 28px;
+      background:
+        radial-gradient(circle at 14% 18%, rgba(0, 0, 120, 0.16), rgba(0, 0, 120, 0) 34%),
+        radial-gradient(circle at 88% 22%, rgba(31, 79, 214, 0.18), rgba(31, 79, 214, 0) 32%),
+        radial-gradient(circle at 72% 88%, rgba(163, 32, 32, 0.12), rgba(163, 32, 32, 0) 28%),
+        linear-gradient(145deg, rgba(247, 250, 255, 0.98), rgba(255, 255, 255, 0.94));
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.92),
+        0 28px 60px rgba(15, 23, 42, 0.09);
+    }
+
+    .error-hero::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        linear-gradient(90deg, rgba(15, 27, 45, 0.02) 1px, transparent 1px),
+        linear-gradient(rgba(15, 27, 45, 0.02) 1px, transparent 1px);
+      background-size: 26px 26px;
+      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 88%);
+      pointer-events: none;
+    }
+
+    .error-hero-copy,
+    .error-code-orb,
+    .error-detail-grid {
+      position: relative;
+      z-index: 1;
+    }
+
+    .error-kicker,
+    .error-panel-kicker {
+      display: inline-flex;
+      align-items: center;
+      min-height: 28px;
+      padding: 0 12px;
+      border-radius: 999px;
+      border: 1px solid rgba(0, 0, 120, 0.12);
+      background: rgba(0, 0, 120, 0.06);
+      color: var(--ds-brand-strong);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .error-hero-copy h1 {
+      margin: 16px 0 0;
+      max-width: 10ch;
+      color: var(--ds-ink-strong);
+      font-size: clamp(42px, 7vw, 78px);
+      line-height: 0.94;
+      letter-spacing: -0.06em;
+    }
+
+    .error-message {
+      max-width: 58ch;
+      margin: 16px 0 0;
+      color: #4b5e78;
+      font-size: clamp(16px, 2vw, 19px);
+      line-height: 1.65;
+    }
+
+    .error-actions {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-top: 24px;
+    }
+
+    .error-code-orb {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .error-code-ring {
+      position: relative;
+      display: grid;
+      place-items: center;
+      width: min(32vw, 300px);
+      aspect-ratio: 1;
+      border-radius: 50%;
+      border: 1px solid rgba(0, 0, 120, 0.12);
+      background:
+        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.96), rgba(239, 245, 255, 0.94) 54%, rgba(224, 234, 249, 0.88) 100%);
+      box-shadow:
+        inset 0 10px 32px rgba(255, 255, 255, 0.8),
+        0 20px 45px rgba(15, 23, 42, 0.12);
+    }
+
+    .error-code-ring::before,
+    .error-code-ring::after {
+      content: "";
+      position: absolute;
+      inset: 14px;
+      border-radius: 50%;
+      border: 1px dashed rgba(23, 63, 141, 0.18);
+    }
+
+    .error-code-ring::after {
+      inset: -16px;
+      border-style: solid;
+      border-width: 1px;
+      border-color: rgba(31, 79, 214, 0.1);
+    }
+
+    .error-code-label {
+      margin-top: 8px;
+      color: #6d7f97;
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .error-code-ring strong {
+      color: #10203a;
+      font-size: clamp(60px, 10vw, 120px);
+      line-height: 0.9;
+      letter-spacing: -0.08em;
+    }
+
+    .error-detail-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
+      gap: 18px;
+    }
+
+    .error-panel {
+      padding: 24px;
+      border: 1px solid rgba(216, 226, 239, 0.94);
+      border-radius: 22px;
+      background:
+        radial-gradient(circle at top right, rgba(31, 79, 214, 0.05), rgba(31, 79, 214, 0) 34%),
+        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.95),
+        0 16px 30px rgba(15, 23, 42, 0.06);
+    }
+
+    .error-panel-primary {
+      background:
+        radial-gradient(circle at top left, rgba(0, 0, 120, 0.06), rgba(0, 0, 120, 0) 30%),
+        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.96));
+    }
+
+    .error-panel-head {
+      display: grid;
+      gap: 10px;
+      margin-bottom: 14px;
+    }
+
+    .error-panel h2 {
+      margin: 0;
+      color: #17345e;
+      font-size: 24px;
+      line-height: 1.08;
+      letter-spacing: -0.03em;
+    }
+
+    .error-panel p {
+      margin: 0;
+      color: #53677f;
+      font-size: 15px;
+      line-height: 1.7;
+    }
+
+    .error-signal-row {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+      margin-top: 20px;
+    }
+
+    .error-signal {
+      display: grid;
+      gap: 6px;
+      padding: 14px 16px;
+      border: 1px solid rgba(200, 213, 229, 0.92);
+      border-radius: 16px;
+      background: rgba(255, 255, 255, 0.78);
+    }
+
+    .error-signal span {
+      color: #687b93;
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .error-signal strong {
+      color: #162841;
+      font-size: 15px;
+      line-height: 1.35;
+      word-break: break-word;
+    }
+
+    .error-checklist {
+      display: grid;
+      gap: 12px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .error-checklist li {
+      position: relative;
+      padding-left: 26px;
+      color: #53677f;
+      font-size: 15px;
+      line-height: 1.65;
+    }
+
+    .error-checklist li::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 8px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: linear-gradient(180deg, #1f4fd6, #173f8d);
+      box-shadow: 0 0 0 5px rgba(31, 79, 214, 0.1);
+    }
+
+    @media (max-width: 900px) {
+      .error-hero,
+      .error-detail-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .error-code-orb {
+        justify-content: flex-start;
+      }
+
+      .error-code-ring {
+        width: min(72vw, 260px);
+      }
+    }
+
+    @media (max-width: 640px) {
+      .error-page-shell {
+        padding-top: 18px;
+      }
+
+      .error-hero,
+      .error-panel {
+        padding: 22px 18px;
+      }
+
+      .error-signal-row {
+        grid-template-columns: 1fr;
+      }
+
+      .error-actions {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .error-actions .btn {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  </style>
+{% endblock %}
+
 {% block shell_body %}
   {% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
-  <div class="page-stack">
-    <section class="surface-card" style="max-width: 760px; margin: 0 auto;">
-      <div class="surface-head">
-        <div>
-          <div class="eyebrow">{% trans "Fehlerseite" %}</div>
-          <h1>{{ error_heading }}</h1>
-          <p class="sub">{{ error_message }}</p>
-        </div>
-        <div class="app-stat-card" style="min-width: 120px; text-align: center;">
-          <strong style="font-size: 2rem; line-height: 1;">{{ error_code }}</strong>
-          <span>{% trans "Status" %}</span>
+  <div class="page-stack error-page-shell">
+    <section class="error-hero">
+      <div class="error-hero-copy">
+        <div class="error-kicker">{% trans "System Response" %}</div>
+        <h1>{{ error_heading }}</h1>
+        <p class="error-message">{{ error_message }}</p>
+        <div class="error-actions">
+          <a class="btn btn-primary" href="/">{% trans "Zur Startseite" %}</a>
+          {% if request.user.is_authenticated %}
+          <a class="btn btn-secondary" href="/requests/">{% trans "Zum Dashboard" %}</a>
+          {% else %}
+          <a class="btn btn-secondary" href="/accounts/login/">{% trans "Anmelden" %}</a>
+          {% endif %}
         </div>
       </div>
-      <div class="app-action-row">
-        <a class="btn btn-primary" href="/">{% trans "Zur Startseite" %}</a>
-        {% if request.user.is_authenticated %}
-        <a class="btn btn-secondary" href="/requests/">{% trans "Zum Dashboard" %}</a>
-        {% else %}
-        <a class="btn btn-secondary" href="/accounts/login/">{% trans "Anmelden" %}</a>
-        {% endif %}
+      <div class="error-code-orb" aria-hidden="true">
+        <div class="error-code-ring">
+          <span class="error-code-label">{% trans "Status" %}</span>
+          <strong>{{ error_code }}</strong>
+        </div>
       </div>
     </section>
+
+    <section class="error-detail-grid">
+      <article class="error-panel error-panel-primary">
+        <div class="error-panel-head">
+          <div class="error-panel-kicker">{% trans "What Happened" %}</div>
+          <h2>{{ error_title }}</h2>
+        </div>
+        <p>{{ error_message }}</p>
+        <div class="error-signal-row">
+          <div class="error-signal">
+            <span>{% trans "HTTP" %}</span>
+            <strong>{{ error_code }}</strong>
+          </div>
+          <div class="error-signal">
+            <span>{% trans "Path" %}</span>
+            <strong>{{ request.path|default:"/" }}</strong>
+          </div>
+        </div>
+      </article>
+
+      <article class="error-panel">
+        <div class="error-panel-head">
+          <div class="error-panel-kicker">{% trans "Next Step" %}</div>
+          <h2>{% trans "How to continue" %}</h2>
+        </div>
+        <ul class="error-checklist">
+          <li>{% trans "Gehen Sie zur Startseite zurück und öffnen Sie den gewünschten Bereich erneut." %}</li>
+          <li>{% trans "Prüfen Sie die URL, falls Sie eine Adresse manuell eingegeben haben." %}</li>
+          <li>{% trans "Wenn das Problem bestehen bleibt, prüfen Sie die Server-Logs oder wenden Sie sich an die Administration." %}</li>
+        </ul>
+      </article>
+    </section>
   </div>
 {% endblock %}