feat: Update landing pages and SEO content for Bisaya and Falukant

- Enhanced the Bisaya learning landing page with new content and improved layout.
- Added FAQ section to the Bisaya learning page addressing common questions.
- Updated SEO metadata for Bisaya learning and Falukant pages to improve search visibility.
- Revised descriptions and titles in multiple languages for consistency and clarity.
- Improved styling and structure of the Falukant landing page, emphasizing gameplay features and user engagement.

frontend/index.html

@@ -40,7 +40,7 @@
         <section lang="de" style="max-width:960px;margin:40px auto;padding:0 20px;font-family:Arial,sans-serif;line-height:1.6;">
             <h1>YourPart</h1>
             <p>YourPart ist eine Plattform fuer Community, Chat, Forum, Blogs, Vokabeltrainer, das Browser-Aufbauspiel Falukant und Minispiele.</p>
-            <p>Wichtige Bereiche: <a href="/blogs">Blogs</a>, <a href="/vokabeltrainer">Vokabeltrainer</a>, <a href="/falukant">Falukant</a> und <a href="/minigames">Minispiele</a>.</p>
+            <p>Wichtige Bereiche: <a href="/blogs">Blogs</a>, <a href="/vokabeltrainer">Vokabeltrainer</a>, <a href="/bisaya-lernen">Bisaya lernen</a>, <a href="/deutsch-fuer-bisaya">Deutsch für Bisaya-Sprecher</a>, <a href="/falukant">Falukant</a> und <a href="/minigames">Minispiele</a>.</p>
         </section>
         <section lang="en" style="max-width:960px;margin:24px auto;padding:0 20px;font-family:Arial,sans-serif;line-height:1.6;">
             <h2>YourPart (English)</h2>

frontend/src/i18n/locales/ceb/seo.json

@@ -12,7 +12,7 @@
             "jsonLdDescription": "Online community nga adunay forum, chat, beginner bokabularyo (Bisaya/Aleman), Falukant ug minigames sa browser—walay installation."
         },
         "falukant": {
-            "title": "Falukant - Libre nga medieval browser game (ekonomiya ug politika)",
+            "title": "Falukant - Medieval browser game (ekonomiya ug politika)",
             "description": "Falukant: medieval nga browser builder game nga adunay komersyo, produksyon, politika, pamilya ug pag-uswag sa karakter—ekonomiya sim online sa YourPart nga walay install.",
             "keywords": "Falukant, browser game, builder, medieval, ekonomiya, ekonomiya sim, politika, libre, walay download, YourPart",
             "jsonLdDescription": "Medieval nga browser builder game nga adunay komersyo, politika, pamilya ug pag-uswag sa karakter.",

frontend/src/i18n/locales/de/seo.json

@@ -12,8 +12,8 @@
             "jsonLdDescription": "Online-Community mit Forum, Chat, Vokabeltrainer (Anfängerkurse Bisaya/Deutsch), Falukant und Minispielen – ohne Installation."
         },
         "falukant": {
-            "title": "Falukant - Kostenloses Mittelalter-Browsergame (Wirtschaft & Politik)",
+            "title": "Falukant – Mittelalter-Browsergame für Wirtschaft & Politik | YourPart",
-            "description": "Falukant: mittelalterliches Browser-Aufbauspiel mit Handel, Produktion, Politik, Familie und Charakterentwicklung – Wirtschaftssimulation online spielen ohne Installation auf YourPart.",
+            "description": "Falukant ist ein mittelalterliches Browser-Aufbauspiel mit Handel, Produktion, Familie, Politik und Charakterentwicklung – direkt auf YourPart im Browser.",
             "keywords": "Falukant, Browsergame, Aufbauspiel, Mittelalterspiel, Wirtschaftsspiel, Wirtschaftssimulation, Politikspiel, kostenlos, ohne Download, YourPart",
             "jsonLdDescription": "Mittelalterliches Browser-Aufbauspiel mit Handel, Politik, Familie und Charakterentwicklung.",
             "jsonLdName": "Falukant"
@@ -33,8 +33,8 @@
             "jsonLdName": "YourPart Vokabeltrainer"
         },
         "bisayaLearning": {
-            "title": "Bisaya lernen online - Cebuano fuer Anfaenger | YourPart",
+            "title": "Bisaya lernen online: Cebuano für Anfänger | YourPart",
-            "description": "Bisaya online lernen fuer deutschsprachige Anfaenger: Vokabeln, Satzmuster und Alltagssaetze fuer Familie, Reisen, Gesundheit und Gespraeche direkt im Browser ueben.",
+            "description": "Bisaya online lernen für deutschsprachige Anfänger: Vokabeln, Satzmuster und Alltagssätze für Familie, Reisen, Gesundheit und Gespräche im Browser üben.",
             "keywords": "Bisaya lernen, Cebuano lernen, Visaya lernen, Bisaya Vokabeln, Cebuano Anfaenger, Philippinen Sprache lernen, Bisaya Deutsch, Vokabeltrainer",
             "jsonLdDescription": "Online-Kurs fuer deutschsprachige Anfaenger, die Bisaya/Cebuano mit Alltagssaetzen und Vokabeltraining lernen wollen.",
             "jsonLdName": "Bisaya lernen fuer deutschsprachige Anfaenger"

frontend/src/i18n/locales/en/seo.json

@@ -12,7 +12,7 @@
             "jsonLdDescription": "Online community with forums, chat, beginner vocabulary courses (Bisaya/German), Falukant and browser minigames—no install required."
         },
         "falukant": {
-            "title": "Falukant - Free medieval browser game (economy & politics)",
+            "title": "Falukant - Medieval browser game (economy & politics)",
             "description": "Falukant: medieval browser builder game with trade, production, politics, family and character progression—play this economy sim online with no install on YourPart.",
             "keywords": "Falukant, browser game, builder game, medieval game, economy game, economy sim, politics game, free, no download, YourPart",
             "jsonLdDescription": "Medieval browser builder game with trade, politics, family and character progression.",

frontend/src/i18n/locales/es/seo.json

@@ -12,7 +12,7 @@
             "jsonLdDescription": "Comunidad online con foro, chat, cursos de vocabulario para principiantes (bisaya/alemán), Falukant y minijuegos—sin instalación."
         },
         "falukant": {
-            "title": "Falukant - Juego medieval gratis en el navegador (economía y política)",
+            "title": "Falukant - Juego medieval en el navegador (economía y política)",
             "description": "Falukant: juego de construcción medieval con comercio, producción, política, familia y progresión—simulación económica online sin instalación en YourPart.",
             "keywords": "Falukant, juego navegador, construcción, medieval, economía, simulación económica, política, gratis, sin descarga, YourPart",
             "jsonLdDescription": "Juego de construcción medieval en el navegador con comercio, política, familia y progresión.",

frontend/src/i18n/locales/fr/seo.json

@@ -12,7 +12,7 @@
             "jsonLdDescription": "Communauté en ligne avec forum, chat, cours de vocabulaire débutants (bisaya/allemand), Falukant et mini-jeux—sans installation."
         },
         "falukant": {
-            "title": "Falukant - Jeu médiéval gratuit dans le navigateur (économie et politique)",
+            "title": "Falukant - Jeu médiéval dans le navigateur (économie et politique)",
             "description": "Falukant : jeu de construction médiéval avec commerce, production, politique, famille et progression—simulation économique en ligne sans installation sur YourPart.",
             "keywords": "Falukant, jeu navigateur, construction, médiéval, économie, simulation économique, politique, gratuit, sans téléchargement, YourPart",
             "jsonLdDescription": "Jeu de construction par navigateur médiéval avec développement du commerce, de la politique, de la famille et du personnage.",

frontend/src/utils/seo.js

@@ -188,6 +188,36 @@ export function buildRouteJsonLd(route, t, uiLocale) {
           name: DEFAULT_SITE_NAME,
         },
       },
+      {
+        '@context': 'https://schema.org',
+        '@type': 'FAQPage',
+        mainEntity: [
+          {
+            '@type': 'Question',
+            name: 'Was für ein Spiel ist Falukant?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Falukant ist ein mittelalterliches Browser-Aufbauspiel mit Wirtschaft, Familie, Charakterentwicklung und gesellschaftlichen Entscheidungen.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'Kann ich Falukant ohne Installation spielen?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Ja. Falukant gehört zu YourPart und wird im Browser genutzt; eine separate Spielinstallation ist nicht nötig.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'Was mache ich am Anfang in Falukant?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Nach der Anmeldung legst du eine Figur an. Danach kannst du dich mit deinem Besitz, wirtschaftlichen Entscheidungen und dem Leben deiner Familie beschäftigen.',
+            },
+          },
+        ],
+      },
     ];
   }
 
@@ -234,6 +264,36 @@ export function buildRouteJsonLd(route, t, uiLocale) {
           sameAs: buildAbsoluteUrl('/'),
         },
       },
+      {
+        '@context': 'https://schema.org',
+        '@type': 'FAQPage',
+        mainEntity: [
+          {
+            '@type': 'Question',
+            name: 'Ist Bisaya dasselbe wie Cebuano?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Die Begriffe werden im Alltag oft ähnlich verwendet. Der YourPart-Kurs richtet sich an deutschsprachige Anfänger, die Cebuano/Bisaya für praktische Situationen lernen möchten.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'Für wen ist der Bisaya-Kurs geeignet?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Der Einstieg ist für deutschsprachige Lernende gedacht, die Grundwortschatz und einfache Satzmuster für Alltag, Familie oder Reisen aufbauen möchten.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'Brauche ich eine App, um Bisaya zu lernen?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Nein. Das Sprachlernmodul von YourPart wird im Browser genutzt. Für Kurse und persönlichen Lernfortschritt meldest du dich an.',
+            },
+          },
+        ],
+      },
     ];
   }
 

frontend/src/views/public/BisayaLearningLandingView.vue

@@ -1,179 +1,44 @@
 <template>
-  <main class="seo-landing">
+  <main class="learning-landing">
-    <section class="intro">
+    <section class="hero" aria-labelledby="bisaya-title">
-      <div class="intro__copy">
+      <div class="hero__copy">
-        <p class="eyebrow">Bisaya online lernen</p>
+        <p class="eyebrow">Cebuano / Bisaya für deutschsprachige Anfänger</p>
-        <h1>Bisaya lernen fuer Alltag, Familie und Reisen</h1>
+        <h1 id="bisaya-title">Bisaya lernen: Praktisches Cebuano für Alltag, Familie und Reisen</h1>
-        <p class="lead">
+        <p class="lead">Lerne Bisaya mit kurzen Lektionen, alltagstauglichen Wörtern und wiederholbaren Satzmustern. Der Sprachlernmodul von YourPart ist für den Einstieg vom Deutschen ins Cebuano/Bisaya gedacht.</p>
-          Der YourPart-Vokabeltrainer fuehrt deutschsprachige Anfaenger durch kurze Bisaya-Lektionen mit Wortschatz,
-          Satzmustern und Uebungen fuer echte Alltagssituationen.
-        </p>
         <div class="actions">
-          <router-link class="cta" to="/vokabeltrainer">Zum Vokabeltrainer</router-link>
+          <router-link class="button button--primary" to="/socialnetwork/vocab">Zum Sprachlernmodul</router-link>
-          <router-link class="text-link" to="/deutsch-fuer-bisaya">Deutsch fuer Bisaya-Sprecher</router-link>
+          <router-link class="button button--secondary" to="/deutsch-fuer-bisaya">Deutsch für Bisaya-Sprecher</router-link>
         </div>
+        <p class="access-note">Für Kurse und deinen Lernfortschritt meldest du dich bei YourPart an.</p>
       </div>
-      <img class="intro__image" src="/images/mascot/mascot_female.png" alt="YourPart Sprachtrainer" />
+      <div class="hero__visual"><div class="word-card word-card--one"><span>kumusta</span><strong>Hallo</strong></div><img src="/images/mascot/mascot_female.png" alt="YourPart-Maskottchen begleitet das Bisaya-Lernen" /><div class="word-card word-card--two"><span>salamat</span><strong>Danke</strong></div></div>
     </section>
 
-    <section class="content-band">
+    <section class="section" aria-labelledby="learn-title">
-      <div class="content-grid">
+      <div class="section__heading"><p class="section-label">Klein anfangen, weiterkommen</p><h2 id="learn-title">Was du im Bisaya-Sprachlernmodul übst</h2></div>
-        <article>
+      <div class="benefits">
-          <h2>Was du uebst</h2>
+        <article><span class="benefit-number">01</span><h3>Wörter mit Bezug zum Alltag</h3><p>Begrüßung, Familie, Essen, Wege, Preise und Gesundheit geben dir einen praktischen Grundwortschatz für Gespräche.</p></article>
-          <p>
+        <article><span class="benefit-number">02</span><h3>Kurze Sätze verstehen</h3><p>Lerne typische Muster und einfache Fragen, damit aus einzelnen Bisaya-Vokabeln erste eigene Sätze werden.</p></article>
-            Begruessung, Familie, Essen, Wege, Preise, Gesundheit, Besuch und einfache Gespraeche. Der Kurs setzt auf
+        <article><span class="benefit-number">03</span><h3>Wiederholen im eigenen Tempo</h3><p>Gehe Lektionen und Vokabeln erneut durch, wenn du sie festigen möchtest – direkt im Browser und mit deinem Lernstand.</p></article>
-            haeufige Saetze wie <strong>Naa ko sa balay</strong>, kurze Fragen und wiederholbare Muster.
-          </p>
-        </article>
-        <article>
-          <h2>Fuer wen es passt</h2>
-          <p>
-            Fuer deutschsprachige Lernende, die Cebuano/Bisaya im Alltag verstehen und erste eigene Saetze bilden
-            wollen. Der Kurs ist bewusst fuer Anfaenger aufgebaut.
-          </p>
-        </article>
-        <article>
-          <h2>Ehrliche Einordnung</h2>
-          <p>
-            Der Trainer ersetzt keinen Unterricht mit Muttersprachlern. Er hilft beim Einstieg, beim Wiederholen und
-            beim Aufbau von sicherem Grundwortschatz bis in vertraute A1-/fruehe A2-Situationen.
-          </p>
-        </article>
       </div>
     </section>
 
-    <section class="keyword-section">
+    <section class="explainer section" aria-labelledby="cebuano-title">
-      <h2>Bisaya oder Cebuano?</h2>
+      <div class="explainer__copy"><p class="section-label">Bisaya oder Cebuano?</p><h2 id="cebuano-title">Die Sprache für echte Begegnungen auf den Philippinen</h2><p>Wer nach <strong>Cebuano lernen</strong>, <strong>Bisaya lernen</strong> oder <strong>Visaya lernen</strong> sucht, meint häufig dieselbe Sprachregion. Auf YourPart ist der Kurs auf Bisaya/Cebuano für deutschsprachige Anfänger ausgerichtet.</p><p>Im Mittelpunkt stehen keine abstrakten Wortlisten, sondern Situationen, in denen du die Sprache gebrauchen kannst: jemanden begrüßen, von der Familie erzählen, unterwegs nachfragen oder einfache Gespräche verstehen. Das Modul ist eine Hilfe zum Einstieg und regelmäßigen Wiederholen – kein Ersatz für Austausch mit Muttersprachlern.</p><router-link class="inline-link" to="/ratgeber/bisaya-grundlagen">Bisaya-Grundlagen im Ratgeber lesen <span aria-hidden="true">→</span></router-link></div>
-      <p>
+      <aside class="phrase-board" aria-label="Beispiel für eine Bisaya-Lektion"><p class="phrase-board__label">Ein kleiner Einstieg</p><p class="phrase">Naa ko sa balay.</p><p class="translation">Ich bin zu Hause.</p><div class="phrase-board__line"></div><p class="phrase-board__hint">Wortschatz, Satzmuster und Wiederholung gehören im Kurs zusammen.</p></aside>
-        Viele suchen nach Cebuano lernen, Bisaya lernen oder Visaya lernen. Auf YourPart verwenden wir Bisaya fuer die
-        Alltagssprache, die viele Menschen auf den Philippinen sprechen. Die Lektionen bleiben praktisch: kurze Saetze,
-        klare Bedeutungen und Uebungen direkt im Browser.
-      </p>
     </section>
+
+    <section class="start section" aria-labelledby="start-title"><div class="section__heading"><p class="section-label">In drei Schritten</p><h2 id="start-title">So startest du mit Bisaya</h2></div><ol class="steps"><li><span>1</span><div><h3>Bei YourPart anmelden</h3><p>Dein Konto speichert den Zugang zu den Kursen und deinen Lernfortschritt.</p></div></li><li><span>2</span><div><h3>Kurs auswählen</h3><p>Öffne den Vokabeltrainer und wähle den passenden Bisaya-/Cebuano-Kurs.</p></div></li><li><span>3</span><div><h3>Lernen und wiederholen</h3><p>Arbeite dich in kleinen Schritten durch Lektionen und übe Wörter erneut.</p></div></li></ol><router-link class="button button--primary" to="/socialnetwork/vocab">Bisaya-Kurs öffnen</router-link></section>
+
+    <section class="faq section" aria-labelledby="faq-title"><div class="section__heading"><p class="section-label">Kurz beantwortet</p><h2 id="faq-title">Häufige Fragen zum Bisaya-Lernen</h2></div><div class="faq__items"><details><summary>Ist Bisaya dasselbe wie Cebuano?</summary><p>Die Begriffe werden im Alltag oft ähnlich verwendet. Der YourPart-Kurs richtet sich an deutschsprachige Anfänger, die Cebuano/Bisaya für praktische Situationen lernen möchten.</p></details><details><summary>Für wen ist der Bisaya-Kurs geeignet?</summary><p>Der Einstieg ist für deutschsprachige Lernende gedacht, die Grundwortschatz und einfache Satzmuster für Alltag, Familie oder Reisen aufbauen möchten.</p></details><details><summary>Brauche ich eine App, um Bisaya zu lernen?</summary><p>Nein. Das Sprachlernmodul von YourPart wird im Browser genutzt. Für Kurse und persönlichen Lernfortschritt meldest du dich an.</p></details></div><nav class="context-links" aria-label="Weiterführende Sprachlernseiten"><router-link to="/vokabeltrainer">Vokabeltrainer im Überblick</router-link><router-link to="/deutsch-fuer-bisaya">Deutsch für Bisaya-Sprecher</router-link><router-link to="/ratgeber/vokabeltrainer-alltag">Vokabeln für den Alltag üben</router-link></nav></section>
   </main>
 </template>
 
 <script>
-export default {
+export default { name: 'BisayaLearningLandingView' };
-  name: 'BisayaLearningLandingView'
-};
 </script>
 
 <style scoped>
-.seo-landing {
+.learning-landing { --ink:#243b35; --green:#236249; --mint:#e7f2e7; --sun:#f4bd60; max-width:1180px; margin:0 auto; padding:34px 20px 80px; color:var(--ink); }.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.78fr); overflow:hidden; background:#f8f5ea; border:1px solid rgba(35,98,73,.15); border-radius:18px; }.hero__copy { padding:clamp(32px,6vw,70px); background:radial-gradient(circle at 8% 8%,rgba(244,189,96,.3),transparent 27%),#f8f5ea; }.eyebrow,.section-label { margin:0 0 12px; color:#39765c; font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; }h1,h2,h3,p { overflow-wrap:break-word; hyphens:auto; }h1 { margin:0; max-width:700px; font-size:clamp(2.15rem,4.4vw,4.1rem); line-height:1.04; letter-spacing:-.04em; }.lead { max-width:650px; margin:22px 0 0; font-size:1.1rem; line-height:1.7; }.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 17px; border-radius:7px; font-weight:800; text-decoration:none; text-align:center; transition:transform .18s ease,background .18s ease; }.button:hover { transform:translateY(-2px); }.button:focus-visible,.inline-link:focus-visible,.context-links a:focus-visible,summary:focus-visible { outline:3px solid #1e6fa8; outline-offset:3px; }.button--primary { background:var(--green); color:#fff; box-shadow:0 6px 0 #164330; }.button--primary:hover { background:#164d39; color:#fff; }.button--secondary { color:#225c45; border:1px solid rgba(35,98,73,.44); }.button--secondary:hover { color:#164330; background:#fffdf5; }.access-note { margin:18px 0 0; color:#4c6058; font-size:.9rem; }.hero__visual { position:relative; min-height:410px; display:flex; align-items:end; justify-content:center; overflow:hidden; background:linear-gradient(160deg,#b9dfc4,#78b785); }.hero__visual::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg,rgba(255,255,255,.14) 0 1px,transparent 1px 25px); }.hero__visual img { position:relative; z-index:1; width:min(92%,360px); max-height:390px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 14px 14px rgba(17,65,44,.23)); }.word-card { position:absolute; z-index:2; padding:12px 16px; background:#fffdf6; box-shadow:0 10px 20px rgba(22,67,48,.18); }.word-card span { display:block; color:#39765c; font-weight:800; }.word-card strong { display:block; margin-top:3px; font-size:.88rem; }.word-card--one { top:19%; left:9%; transform:rotate(-4deg); }.word-card--two { right:8%; bottom:20%; transform:rotate(4deg); }.section { margin-top:72px; }.section__heading { max-width:780px; }.section__heading h2,.explainer h2 { margin:0; font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.12; letter-spacing:-.028em; }.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }.benefits article { padding:28px; background:var(--mint); border-top:4px solid #7cb288; }.benefit-number { color:#39765c; font-weight:800; letter-spacing:.1em; }.benefits h3,.steps h3 { margin:18px 0 8px; font-size:1.14rem; }.benefits p,.explainer p,.steps p,.faq p { margin:0; line-height:1.68; }.explainer { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); gap:clamp(28px,7vw,90px); align-items:center; }.explainer__copy p:not(.section-label) { margin-top:16px; }.inline-link,.context-links a { display:inline-block; margin-top:20px; color:#236249; font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; }.phrase-board { padding:32px; background:#243b35; color:#fbf9ed; box-shadow:12px 12px 0 #f4bd60; }.phrase-board__label { margin:0; color:#a8d8b0; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.phrase { margin:32px 0 6px; font-size:clamp(1.55rem,3vw,2.2rem); font-weight:800; }.translation { margin:0; color:#e1e8dc; }.phrase-board__line { width:52px; height:3px; margin:28px 0 16px; background:#f4bd60; }.phrase-board__hint { margin:0; color:#d5dfd4; line-height:1.6; }.start { padding:clamp(28px,5vw,52px); background:#f8f5ea; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0; margin:32px 0; list-style:none; }.steps li { display:flex; gap:14px; }.steps span { display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; background:#f4bd60; border-radius:50%; font-weight:800; }.steps h3 { margin:3px 0 8px; }.faq__items { margin-top:26px; border-top:1px solid rgba(35,98,73,.2); }.faq details { padding:18px 0; border-bottom:1px solid rgba(35,98,73,.2); }.faq summary { cursor:pointer; font-weight:800; }.faq details p { max-width:800px; margin:12px 30px 0 0; }.context-links { display:flex; flex-wrap:wrap; gap:10px 26px; }
-  max-width: 1120px;
+@media (max-width:800px) { .hero,.explainer { grid-template-columns:1fr; }.hero__visual { min-height:280px; }.hero__visual img { max-height:275px; }.benefits,.steps { grid-template-columns:1fr; }.section { margin-top:52px; } }@media (max-width:480px) { .learning-landing { padding:20px 12px 52px; }.hero__copy { padding:30px 22px; }.hero__visual { min-height:235px; }.word-card { padding:9px 11px; }.section { margin-top:42px; }.benefits article,.phrase-board,.start { padding:24px; } }
-  margin: 0 auto;
-  padding: 36px 20px 72px;
-  color: #1f2f1d;
-}
-
-.intro {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
-  align-items: center;
-  gap: 28px;
-}
-
-.intro__copy {
-  min-width: 0;
-}
-
-.eyebrow {
-  margin: 0 0 10px;
-  font-size: 0.82rem;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-h1 {
-  margin: 0;
-  font-size: 2.7rem;
-  line-height: 1.08;
-}
-
-.lead {
-  max-width: 760px;
-  margin: 18px 0 0;
-  font-size: 1.1rem;
-  line-height: 1.65;
-}
-
-.intro__image {
-  width: 100%;
-  max-height: 320px;
-  object-fit: contain;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
-  margin-top: 24px;
-}
-
-.cta,
-.text-link {
-  min-height: 42px;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 8px;
-  font-weight: 700;
-  text-decoration: none;
-}
-
-.cta {
-  padding: 0 18px;
-  background: #244f2b;
-  color: #fff;
-}
-
-.text-link {
-  color: #244f2b;
-}
-
-.content-band,
-.keyword-section {
-  margin-top: 34px;
-}
-
-.content-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 18px;
-}
-
-article {
-  padding: 20px;
-  border: 1px solid rgba(31, 47, 29, 0.14);
-  border-radius: 8px;
-  background: #f7fbf2;
-}
-
-h2 {
-  margin: 0 0 10px;
-}
-
-p {
-  line-height: 1.65;
-}
-
-.keyword-section {
-  max-width: 820px;
-}
-
-@media (max-width: 760px) {
-  .intro,
-  .content-grid {
-    grid-template-columns: 1fr;
-  }
-
-  h1 {
-    font-size: 2.1rem;
-  }
-
-  .intro__image {
-    max-height: 240px;
-  }
-}
 </style>

frontend/src/views/public/FalukantLandingView.vue

@@ -1,128 +1,122 @@
 <template>
-  <section class="marketing-page">
+  <main class="falukant-landing">
-    <div class="hero">
+    <section class="hero" aria-labelledby="falukant-title">
-      <p class="eyebrow">Browser-Aufbauspiel</p>
+      <div class="hero__copy">
-      <h1>Falukant verbindet Wirtschaft, Politik und Charakterentwicklung in einer mittelalterlichen Spielwelt.</h1>
+        <p class="eyebrow">Mittelalter · Wirtschaft · Entscheidungen</p>
+        <h1 id="falukant-title">Falukant: Das Mittelalter-Browsergame für Wirtschaft, Familie und Politik</h1>
         <p class="lead">
-        Baue Besitz auf, verwalte Zweigstellen, pflege Beziehungen und triff politische Entscheidungen in einem
+          In Falukant führst du eine Figur durch eine lebendige mittelalterliche Spielwelt. Baue Besitz auf,
-        persistenten Browsergame innerhalb von YourPart.
+          entwickle Unternehmen und entscheide, welchen Platz deine Familie in Gesellschaft und Politik einnimmt.
         </p>
-      <router-link class="cta" to="/">Jetzt entdecken</router-link>
+        <div class="hero__actions">
+          <router-link class="button button--primary" to="/falukant/create">Figur erstellen und Falukant beginnen</router-link>
+          <router-link class="button button--quiet" to="/ratgeber/falukant-wirtschaft">So funktioniert die Wirtschaft</router-link>
         </div>
+        <p class="hero__note">Falukant läuft direkt im Browser. Zum Spielen meldest du dich bei YourPart an.</p>
+      </div>
+      <div class="hero__scene" aria-hidden="true">
+        <img src="/images/falukant/map.png" alt="" />
+        <div class="scene-card scene-card--family"><span>Dein Haus</span><strong>Familie &amp; Status</strong></div>
+        <div class="scene-card scene-card--trade"><span>Dein Betrieb</span><strong>Handel &amp; Produktion</strong></div>
+      </div>
+    </section>
 
-    <div class="grid">
+    <section class="section" aria-labelledby="loops-title">
-      <article>
+      <div class="section__heading">
-        <h2>Wirtschaft mit Tiefe</h2>
+        <p class="section-label">Deine Entscheidungen zählen</p>
-        <p>Produktion, Lager, Handel und Finanzen greifen ineinander und erzeugen eine langfristige Aufbauspiel-Dynamik.</p>
+        <h2 id="loops-title">Drei Spielbereiche, die in Falukant zusammenwirken</h2>
+      </div>
+      <div class="feature-list">
+        <article class="feature">
+          <img src="/images/icons/falukant/workshop.png" alt="" />
+          <h3>Wirtschaft aufbauen</h3>
+          <p>Produktion, Lager, Handel und Finanzen gehören zusammen. Plane Zweigstellen und entwickle deinen Besitz Schritt für Schritt.</p>
         </article>
-      <article>
+        <article class="feature">
-        <h2>Persönliche Entwicklung</h2>
+          <img src="/images/icons/falukant/family.png" alt="" />
-        <p>Familie, Bildung, Gesundheit und gesellschaftlicher Status beeinflussen deinen Weg in Falukant.</p>
+          <h3>Familie gestalten</h3>
+          <p>Bildung, Gesundheit, Beziehungen und gesellschaftlicher Rang begleiten die Geschichte deiner Figur und ihrer Familie.</p>
         </article>
-      <article>
+        <article class="feature">
-        <h2>Politik und Unterwelt</h2>
+          <img src="/images/icons/falukant/politics.png" alt="" />
-        <p>Zwischen Kirche, Reputation, Adel und dunklen Netzwerken entstehen Entscheidungen mit spürbaren Folgen.</p>
+          <h3>In der Gesellschaft handeln</h3>
+          <p>Reputation, Adel, Kirche und Politik eröffnen Wege – und stellen dich vor Entscheidungen mit Folgen für deinen Status.</p>
         </article>
       </div>
     </section>
+
+    <section class="story section" aria-labelledby="what-is-falukant">
+      <div class="story__image">
+        <img src="/images/falukant/houses.png" alt="Ansicht mittelalterlicher Häuser aus Falukant" />
+      </div>
+      <div class="story__copy">
+        <p class="section-label">Mehr als eine einzelne Spielrunde</p>
+        <h2 id="what-is-falukant">Was ist Falukant?</h2>
+        <p>
+          Falukant ist eine Browser-Wirtschaftssimulation im Mittelalter. Statt nur Gebäude anzuklicken,
+          verbindest du wirtschaftliche Planung mit dem Leben deiner Figur: Arbeit, Familie, Bildung und Ansehen
+          beeinflussen die nächsten Möglichkeiten.
+        </p>
+        <p>
+          Wer ein Aufbauspiel mit Handel und langfristigen Entscheidungen sucht, findet hier einen ruhigen,
+          fortlaufenden Spielraum. Der Einstieg beginnt mit einer eigenen Figur; danach entscheidest du selbst,
+          ob zuerst ein Betrieb, das Familienleben oder dein gesellschaftlicher Aufstieg im Mittelpunkt steht.
+        </p>
+        <router-link class="inline-link" to="/ratgeber/falukant-politik-und-gesellschaft">Ratgeber zu Politik und Gesellschaft in Falukant <span aria-hidden="true">→</span></router-link>
+      </div>
+    </section>
+
+    <section class="start section" aria-labelledby="start-title">
+      <div class="section__heading">
+        <p class="section-label">Dein erster Zug</p>
+        <h2 id="start-title">So startest du in Falukant</h2>
+      </div>
+      <ol class="steps">
+        <li><span>01</span><div><h3>Bei YourPart anmelden</h3><p>Lege dein Konto an oder melde dich an, damit dein Spielstand zu dir gehört.</p></div></li>
+        <li><span>02</span><div><h3>Eine Figur anlegen</h3><p>Wähle den Ausgangspunkt deiner Geschichte und beginne dein Leben in Falukant.</p></div></li>
+        <li><span>03</span><div><h3>Den ersten Bereich ausbauen</h3><p>Erkunde Wirtschaft, Familie und gesellschaftliche Wege in deinem eigenen Tempo.</p></div></li>
+      </ol>
+      <router-link class="button button--primary" to="/falukant/create">Falukant starten</router-link>
+    </section>
+
+    <section class="faq section" aria-labelledby="faq-title">
+      <div class="section__heading"><p class="section-label">Kurz beantwortet</p><h2 id="faq-title">Häufige Fragen zu Falukant</h2></div>
+      <div class="faq__items">
+        <details><summary>Was für ein Spiel ist Falukant?</summary><p>Falukant ist ein mittelalterliches Browser-Aufbauspiel mit Wirtschaft, Familie, Charakterentwicklung und gesellschaftlichen Entscheidungen.</p></details>
+        <details><summary>Kann ich Falukant ohne Installation spielen?</summary><p>Ja. Falukant gehört zu YourPart und wird im Browser genutzt; eine separate Spielinstallation ist nicht nötig.</p></details>
+        <details><summary>Was mache ich am Anfang in Falukant?</summary><p>Nach der Anmeldung legst du eine Figur an. Danach kannst du dich mit deinem Besitz, wirtschaftlichen Entscheidungen und dem Leben deiner Familie beschäftigen.</p></details>
+      </div>
+      <nav class="context-links" aria-label="Weiterführende Falukant-Seiten">
+        <router-link to="/ratgeber/falukant-familie-charakter">Familie und Charakter in Falukant</router-link>
+        <router-link to="/minigames">Weitere Browser-Minispiele</router-link>
+      </nav>
+    </section>
+  </main>
 </template>
 
+<script>
+export default { name: 'FalukantLandingView' };
+</script>
+
 <style scoped>
-.marketing-page {
+.falukant-landing { --ink:#20261b; --moss:#34482a; --gold:#d4a950; --paper:#faf7ed; max-width:1180px; margin:0 auto; padding:32px 20px 80px; color:var(--ink); }
-  max-width: 1100px;
+.hero { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); overflow:hidden; background:var(--paper); border:1px solid rgba(90,72,34,.2); border-radius:18px; box-shadow:0 22px 48px rgba(45,37,17,.14); }
-  margin: 0 auto;
+.hero__copy { padding:clamp(32px,6vw,72px); background:radial-gradient(circle at 5% 4%,rgba(212,169,80,.24),transparent 30%),linear-gradient(135deg,#f9f4e6,#eee4c9); }
-  padding: 48px 20px 72px;
+.eyebrow,.section-label { margin:0 0 12px; color:#74561f; font-weight:800; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; }
-  color: var(--color-text-primary);
+h1,h2,h3,p { overflow-wrap:break-word; hyphens:auto; }
-}
+h1 { margin:0; max-width:720px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.15rem,4.5vw,4.25rem); line-height:1.02; letter-spacing:-.035em; }
-
+.lead { max-width:650px; margin:24px 0 0; font-size:1.1rem; line-height:1.7; }
-.hero {
+.hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
-  min-width: 0;
+.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 17px; border-radius:6px; font-weight:800; text-align:center; text-decoration:none; transition:transform .18s ease,background .18s ease; }
-  padding: 32px;
+.button:hover { transform:translateY(-2px); }.button:focus-visible,.inline-link:focus-visible,.context-links a:focus-visible,summary:focus-visible { outline:3px solid #1e6fa8; outline-offset:3px; }
-  border-radius: var(--radius-lg);
+.button--primary { background:var(--moss); color:#fff; box-shadow:0 7px 0 #20311a; }.button--primary:hover { color:#fff; background:#263c20; }.button--quiet { color:#3a462d; border:1px solid rgba(58,70,45,.45); }.button--quiet:hover { color:#1f2e19; background:rgba(255,255,255,.54); }
-  background: #fffdf7;
+.hero__note { margin:18px 0 0; font-size:.9rem; line-height:1.5; color:#5b563f; }
-  border: 1px solid rgba(154, 113, 54, 0.24);
+.hero__scene { position:relative; min-height:410px; background:#26381f; overflow:hidden; }.hero__scene::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,31,17,.05),rgba(20,30,15,.68)); }.hero__scene>img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(.8) contrast(1.05); }
-  border-left: 4px solid #b18445;
+.scene-card { position:absolute; z-index:1; padding:12px 15px; color:#fffaf0; background:rgba(27,37,22,.87); border-left:3px solid var(--gold); box-shadow:0 8px 18px rgba(0,0,0,.24); }.scene-card span { display:block; margin-bottom:3px; color:#dfc98e; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }.scene-card strong { font-size:.95rem; }.scene-card--family { top:18%; left:8%; }.scene-card--trade { right:6%; bottom:16%; }
-  box-shadow: 0 16px 36px rgba(76, 61, 36, 0.08);
+.section { margin-top:72px; }.section__heading { max-width:760px; }.section__heading h2,.story h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.1; letter-spacing:-.025em; }.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:28px; border:1px solid rgba(69,71,40,.17); background:rgba(69,71,40,.17); }.feature { padding:28px; background:#fffdf7; }.feature img { width:46px; height:46px; object-fit:contain; }.feature h3,.steps h3 { margin:18px 0 8px; font-size:1.15rem; }.feature p,.story p,.steps p,.faq p { margin:0; line-height:1.68; }
-}
+.story { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1fr); align-items:center; gap:clamp(28px,6vw,80px); }.story__image { background:#364c2e; padding:12px; box-shadow:12px 12px 0 #d6b36a; }.story__image img { display:block; width:100%; min-height:260px; object-fit:cover; }.story__copy p:not(.section-label) { margin-top:16px; }.inline-link,.context-links a { display:inline-block; margin-top:20px; color:#435c2d; font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; }
-
+.start { padding:clamp(28px,5vw,52px); background:#26381f; color:#f8f3e4; }.start .section-label { color:#e2c47d; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0; margin:32px 0; list-style:none; }.steps li { display:flex; gap:14px; }.steps span { flex:0 0 auto; color:#e2c47d; font-weight:800; letter-spacing:.08em; }.steps h3 { margin:0 0 8px; }.steps p { color:#e5e6dd; }.start .button--primary { background:#d4a950; color:#20261b; box-shadow:0 7px 0 #a87b2c; }.start .button--primary:hover { color:#20261b; background:#e1bb67; }
-.eyebrow {
+.faq__items { margin-top:26px; border-top:1px solid rgba(69,71,40,.2); }.faq details { border-bottom:1px solid rgba(69,71,40,.2); padding:18px 0; }.faq summary { cursor:pointer; font-weight:800; }.faq details p { max-width:800px; margin:12px 30px 0 0; }.context-links { display:flex; flex-wrap:wrap; gap:10px 26px; }
-  margin: 0 0 12px;
+@media (max-width:800px) { .hero,.story { grid-template-columns:1fr; }.hero__scene { min-height:280px; }.feature-list,.steps { grid-template-columns:1fr; }.section { margin-top:52px; } }
-  font-size: 0.82rem;
+@media (max-width:480px) { .falukant-landing { padding:20px 12px 52px; }.hero__copy { padding:30px 22px; }.hero__scene { min-height:230px; }.scene-card { padding:9px 11px; }.section { margin-top:42px; }.feature { padding:22px; }.start { padding:28px 22px; } }
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: #80612f;
-}
-
-.hero h1 {
-  margin: 0;
-  font-size: clamp(2rem, 4vw, 3.6rem);
-  line-height: 1.08;
-  overflow-wrap: break-word;
-  hyphens: auto;
-  word-break: normal;
-}
-
-.lead {
-  max-width: 760px;
-  margin: 20px 0 0;
-  font-size: 1.1rem;
-  line-height: 1.65;
-}
-
-.cta {
-  display: inline-block;
-  margin-top: 24px;
-  padding: 12px 20px;
-  border-radius: var(--radius-md);
-  background: var(--color-primary);
-  color: var(--color-text-on-accent);
-  text-decoration: none;
-  font-weight: 700;
-}
-
-.cta:hover {
-  background: var(--color-primary-hover);
-  color: var(--color-text-on-accent);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 18px;
-  margin-top: 28px;
-}
-
-.grid article {
-  padding: 24px;
-  border-radius: var(--radius-lg);
-  background: #fffefa;
-  border: 1px solid rgba(75, 91, 75, 0.16);
-}
-
-.grid h2 {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-.grid p {
-  margin: 0;
-  line-height: 1.65;
-}
-
-@media (max-width: 480px) {
-  .marketing-page {
-    padding: 24px 12px 44px;
-  }
-
-  .hero,
-  .grid article {
-    padding: 22px 18px;
-  }
-
-  .hero h1 {
-    font-size: clamp(1.58rem, 8.2vw, 2.15rem);
-    line-height: 1.12;
-  }
-}
 </style>