feat: OAuth RFC9207 'iss' support; home: collapse intro by default; i18n: add oauth strings

frontend/src/views/home/NoLoginView.vue

@@ -8,11 +8,14 @@
                 <Character3D gender="male" :lightweight="true" />
             </div>
             <div class="actions">
-                <section class="actions-panel actions-panel--story surface-card">
+                <section class="actions-panel actions-panel--story surface-card" :class="{ 'collapsed': isStoryCollapsed }">
                     <div class="panel-intro">
                         <span class="panel-kicker">Dein Einstieg</span>
                         <h1 class="home-main-headline">{{ $t('home.nologin.welcome') }}</h1>
                         <p>{{ $t('home.nologin.description') }}</p>
+                        <button type="button" class="toggle-story" @click="isStoryCollapsed = !isStoryCollapsed">
+                            {{ isStoryCollapsed ? 'Mehr anzeigen' : 'Weniger anzeigen' }}
+                        </button>
                     </div>
 
                     <div class="story-highlight">
@@ -170,6 +173,7 @@ export default {
             rememberMe: true,
             oauthProviders: [],
             oauthLoading: false,
+            isStoryCollapsed: true,
         };
     },
     components: {
@@ -343,7 +347,7 @@ export default {
     width: 100%;
 }
 
-.story-highlight {
+    .story-highlight {
     padding: 1rem 1.1rem;
     margin: 0.8rem 0 1rem;
     border-radius: var(--radius-lg);
@@ -351,6 +355,39 @@ export default {
     border: 1px solid rgba(248, 162, 43, 0.12);
 }
 
+/* Collapsed story panel to save vertical space while keeping content in DOM for SEO */
+.actions-panel--story.collapsed {
+    max-height: 260px;
+    overflow: hidden;
+}
+
+.actions-panel--story .toggle-story {
+    margin-top: 0.6rem;
+    background: transparent;
+    border: none;
+    color: #8a5411;
+    font-weight: 700;
+    cursor: pointer;
+    padding: 0.2rem 0.4rem;
+}
+
+/* When collapsed, de-emphasize child blocks visually */
+.actions-panel--story.collapsed .story-block,
+.actions-panel--story.collapsed .story-columns,
+.actions-panel--story.collapsed .story-cta {
+    opacity: 0.0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    transition: opacity 200ms ease, height 200ms ease;
+}
+
+/* Slightly reduce mascot height to make login reachable */
+.mascot {
+    height: clamp(260px, 50vh, 420px);
+}
+
 .story-block {
     margin-bottom: 1rem;
 }