torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor FalukantLandingView.vue: Update content and structure for improved clarity and engagement; enhance styling for better visual appeal.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-08-28 13:31:22 +02:00
parent caa207a3b3
commit a89cd39473
15 changed files with 70 additions and 1322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
frontend/public/assets/index-B4fysdFj.js
View File

File diff suppressed because one or more lines are too long

1
frontend/public/assets/index-B7qXuEZt.css
View File

File diff suppressed because one or more lines are too long

1
frontend/public/assets/index-BLkCbvUa.css
View File

File diff suppressed because one or more lines are too long

387
frontend/public/assets/index-BeXHiB-n.js
View File

File diff suppressed because one or more lines are too long

379
frontend/public/assets/index-C2z2YL6l.js
View File

File diff suppressed because one or more lines are too long

1
frontend/public/assets/index-z5H98VOo.css
View File

File diff suppressed because one or more lines are too long

BIN
frontend/public/assets/message24-DprhQEAI.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.0 KiB

30
frontend/public/index.html
View File

@@ -1,30 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>YourPart – Online-Community, Forum, Chat, Vokabeltrainer & Browsergames</title>
<meta name="description" content="Kostenlose Online-Community mit Forum, Chat, Blogs und Browsergames: Vokabeltrainer, Minispiele und Mittelalter-Aufbauspiel Falukant – ohne Download. Beta-Plattform mit wachsender Produktwelt." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.your-part.de/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="YourPart" />
<meta property="og:title" content="YourPart – Online-Community, Forum, Chat, Vokabeltrainer & Browsergames" />
<meta property="og:description" content="Forum, Chat, Blogs, kostenloser Vokabeltrainer und Browsergames inkl. Falukant – gratis im Browser, ohne Download. Jetzt in der Beta testen." />
<meta property="og:url" content="https://www.your-part.de/" />
<meta property="og:locale" content="de_DE" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="YourPart – Online-Community, Forum, Chat, Vokabeltrainer & Browsergames" />
<meta name="twitter:description" content="Forum, Chat, Blogs, kostenloser Vokabeltrainer und Browsergames inkl. Falukant – gratis im Browser, ohne Download. Jetzt in der Beta testen." />
<meta name="theme-color" content="#F9A22C" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1104166651501135" crossorigin="anonymous"></script>
<script type="module" crossorigin src="/assets/index-B4fysdFj.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B7qXuEZt.css">
</head>
<body>
<div id="app"></div>
</body>
</html>

9
frontend/src/App.vue
View File

@@ -1,7 +1,7 @@
<template>
<div id="app" class="app-shell" :class="{ 'app-shell--falukant': $route.path.startsWith('/falukant') }">
<AppHeader class="app-shell__header" />
<AppNavigation v-if="isLoggedIn && user.active" class="app-shell__nav" />
<AppHeader class="app-shell__header" :is-public-landing="isPublicLanding" />
<AppNavigation v-if="isLoggedIn && user.active && !isPublicLanding" class="app-shell__nav" />
<AppContent class="app-shell__content" />
<AppFooter />
<AnswerContact ref="answerContactDialog" />
@@ -43,7 +43,10 @@ import MultiChatDialog from './dialogues/chat/MultiChatDialog.vue';
export default {
name: 'App',
computed: {
...mapGetters(['isLoggedIn', 'user'])
...mapGetters(['isLoggedIn', 'user']),
isPublicLanding() {
return Boolean(this.$route?.meta?.publicLanding);
}
},
components: {
AppHeader,

8
frontend/src/components/AppHeader.vue
View File

@@ -42,7 +42,7 @@
</select>
</label>
</div>
<div class="connection-status" v-if="isLoggedIn">
<div class="connection-status" v-if="isLoggedIn && !isPublicLanding">
<div class="status-indicator" :class="backendStatusClass">
<span class="status-dot"></span>
<span class="status-text">{{ $t('appShell.header.backend') }}</span>
@@ -67,6 +67,12 @@ const ADSENSE_CLIENT_ID = 'ca-pub-1104166651501135';
export default {
name: 'AppHeader',
props: {
isPublicLanding: {
type: Boolean,
default: false,
},
},
data() {
return {
adInitialized: false,

3
frontend/src/router/marketingRoutes.js
View File

@@ -12,6 +12,7 @@ const marketingRoutes = [
name: 'FalukantLanding',
component: FalukantLandingView,
meta: {
publicLanding: true,
seo: {
i18nKey: 'falukant',
canonicalPath: '/falukant',
@@ -34,6 +35,7 @@ const marketingRoutes = [
name: 'VocabLanding',
component: VocabLandingView,
meta: {
publicLanding: true,
seo: {
i18nKey: 'vocab',
canonicalPath: '/vokabeltrainer',
@@ -45,6 +47,7 @@ const marketingRoutes = [
name: 'BisayaLearningLanding',
component: BisayaLearningLandingView,
meta: {
publicLanding: true,
seo: {
i18nKey: 'bisayaLearning',
canonicalPath: '/bisaya-lernen',

6
frontend/src/store/index.js
View File

@@ -282,7 +282,11 @@ const store = createStore({
commit('clearSocket');
commit('clearDaemonSocket');
commit('dologout');
router.push('/');
// Öffentliche SEO-Landingpages müssen auch dann an ihrer URL bleiben,
// wenn eine gespeicherte Sitzung abgelaufen ist und per 401 zurückgesetzt wird.
if (!router.currentRoute.value.meta?.publicLanding) {
router.push('/');
}
},
initializeSocket({ commit, state, dispatch }) {
if (!state.isLoggedIn || !state.user || state.backendConnecting) {

20
frontend/src/utils/seo.js
View File

@@ -197,23 +197,23 @@ export function buildRouteJsonLd(route, t, uiLocale) {
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.',
text: 'Falukant ist eine mittelalterliche Browser-Wirtschaftssimulation, in der wirtschaftliche Planung mit Familie, Reputation und gesellschaftlichen Entscheidungen verbunden ist.',
},
},
{
'@type': 'Question',
name: 'Kann ich Falukant ohne Installation spielen?',
name: 'Welche Rolle spielt die Wirtschaft in Falukant?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Ja. Falukant gehört zu YourPart und wird im Browser genutzt; eine separate Spielinstallation ist nicht nötig.',
text: 'Produktion, Lagerung, Handel und Finanzen greifen ineinander. Entscheidungen in einem Bereich wirken sich auf die nächsten Möglichkeiten beim Ausbau des eigenen Besitzes aus.',
},
},
{
'@type': 'Question',
name: 'Was mache ich am Anfang in Falukant?',
name: 'Warum sind langfristige Entscheidungen wichtig?',
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.',
text: 'Falukant verknüpft wirtschaftliche, persönliche und gesellschaftliche Bereiche. Deshalb lohnt es sich, Investitionen und öffentliche Ambitionen mit Blick auf die weitere Entwicklung abzuwägen.',
},
},
],
@@ -273,23 +273,23 @@ export function buildRouteJsonLd(route, t, uiLocale) {
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.',
text: 'Im Alltag wird „Bisaya“ oft für Cebuano verwendet. Der Begriff kann aber weiter gefasst sein und sich auf Sprachen der Visayas beziehen; für Lernmaterialien hilft deshalb ein Blick auf die jeweilige Region.',
},
},
{
'@type': 'Question',
name: 'Für wen ist der Bisaya-Kurs geeignet?',
name: 'Für wen lohnt es sich, Bisaya zu lernen?',
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.',
text: 'Bisaya ist hilfreich für Menschen mit Familie oder Freundschaften in Cebuano-sprachigen Regionen, für Reisen und für alle, die alltägliche Gespräche besser verstehen möchten.',
},
},
{
'@type': 'Question',
name: 'Brauche ich eine App, um Bisaya zu lernen?',
name: 'Wie fange ich als Anfänger sinnvoll an?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Nein. Das Sprachlernmodul von YourPart wird im Browser genutzt. Für Kurse und persönlichen Lernfortschritt meldest du dich an.',
text: 'Beginne mit häufigen Situationen und kurzen Satzmustern. Wiederhole sie regelmäßig, ergänze kleinen thematischen Wortschatz und nutze jede Gelegenheit zum Zuhören und Ausprobieren.',
},
},
],

43
frontend/src/views/public/BisayaLearningLandingView.vue
View File

@@ -1,36 +1,19 @@
<template>
<main class="learning-landing">
<section class="hero" aria-labelledby="bisaya-title">
<div class="hero__copy">
<p class="eyebrow">Cebuano / Bisaya für deutschsprachige Anfänger</p>
<h1 id="bisaya-title">Bisaya lernen: Praktisches Cebuano für Alltag, Familie und Reisen</h1>
<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>
<div class="actions">
<router-link class="button button--primary" to="/socialnetwork/vocab">Zum Sprachlernmodul</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>
<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>
<main class="bisaya-landing">
<section class="hero" aria-labelledby="bisaya-title"><div><p class="eyebrow">Sprachguide für deutschsprachige Einsteiger</p><h1 id="bisaya-title">Bisaya lernen: Cebuano für Alltag, Familie und Reisen</h1><p class="lead">Bisaya beziehungsweise Cebuano wird in vielen Teilen der Philippinen gesprochen. Dieser Einstieg ordnet die Begriffe ein und zeigt, wie du mit alltagsnahen Themen, Satzmustern und regelmäßiger Wiederholung eine Grundlage schaffen kannst.</p></div><aside class="hero__note" aria-label="Beispielwörter auf Bisaya"><span>kumusta</span><strong>Hallo</strong><span>salamat</span><strong>Danke</strong><span>asa?</span><strong>wo?</strong></aside></section>
<section class="section" aria-labelledby="learn-title">
<div class="section__heading"><p class="section-label">Klein anfangen, weiterkommen</p><h2 id="learn-title">Was du im Bisaya-Sprachlernmodul übst</h2></div>
<div class="benefits">
<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>
<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>
<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>
</div>
</section>
<section class="chapter term" aria-labelledby="term-title"><div class="chapter__number">01</div><div><p class="eyebrow">Begriffe einordnen</p><h2 id="term-title">Bisaya oder Cebuano?</h2><p>„Bisaya“ ist im Alltag ein weiter Begriff, der mit den Visayas und verschiedenen dort gesprochenen Sprachen verbunden sein kann. Wenn Menschen von Bisaya lernen sprechen, meinen sie häufig Cebuano – eine Sprache, die unter anderem auf Cebu, in Teilen Mindanaos und in weiteren Regionen verwendet wird.</p><p>Für Lernende ist diese Unterscheidung vor allem praktisch: Suche nach Materialien für Cebuano oder Bisaya, achte auf die angesprochene Region und beginne mit Formulierungen, die du tatsächlich brauchst. Sprache lebt im Gespräch; regionale Wörter und Aussprache können sich unterscheiden.</p><router-link class="text-link" to="/ratgeber/bisaya-grundlagen">Bisaya-Grundlagen im Ratgeber <span aria-hidden="true">→</span></router-link></div></section>
<section class="explainer section" aria-labelledby="cebuano-title">
<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>
<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>
</section>
<section class="reasons" aria-labelledby="reasons-title"><div><p class="eyebrow">Eine Sprache für Begegnungen</p><h2 id="reasons-title">Nicht perfekt sprechen müssen, um näher dran zu sein</h2></div><div class="reasons__copy"><p>Ein paar verlässliche Worte öffnen im Familienalltag, auf Reisen oder bei Besorgungen oft schneller ein Gespräch als ein auswendig gelernter Monolog. Begrüßungen, Höflichkeit, einfache Fragen und Antworten geben Orientierung, wenn du Menschen kennenlernst oder Orte jenseits der üblichen Reiserouten besuchst.</p><p>Ein realistisches Ziel für den Anfang ist nicht, sofort alles zu verstehen. Wichtiger ist, wiederkehrende Situationen zu erkennen, langsam nachzufragen und kleine eigene Sätze bilden zu können.</p></div></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="path" aria-labelledby="path-title"><p class="eyebrow">Ein ruhiger Lernweg</p><h2 id="path-title">Vom einzelnen Wort zum kleinen Gespräch</h2><ol><li><span>01</span><div><h3>Hören und wiedererkennen</h3><p>Starte mit Begrüßungen, Personen und häufigen Wörtern. Höre auf Klang und Betonung, statt nur Listen zu sammeln.</p></div></li><li><span>02</span><div><h3>Wortschatz in Themen bündeln</h3><p>Familie, Essen oder Wege sind überschaubar und lassen sich direkt mit Situationen verbinden, die du kennst.</p></div></li><li><span>03</span><div><h3>Satzmuster variieren</h3><p>Nimm ein kurzes Muster und tausche einzelne Wörter aus. So wächst aus einem Satz eine kleine Auswahl eigener Aussagen.</p></div></li><li><span>04</span><div><h3>Wiederholen und anwenden</h3><p>Wiederholung im Abstand hilft beim Behalten. Nutze neue Wörter zeitnah in Notizen, Gesprächen oder kleinen Fragen.</p></div></li></ol></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>
<section class="topics" aria-labelledby="topics-title"><div class="topics__heading"><p class="eyebrow">Praktische Themen</p><h2 id="topics-title">Worüber Anfänger zuerst sprechen können</h2><p>Ein thematischer Wortschatz bleibt leichter hängen, wenn er in einer konkreten Situation vorkommt.</p></div><dl><div><dt>Begrüßung &amp; Höflichkeit</dt><dd>Hallo sagen, sich bedanken, nach dem Befinden fragen.</dd></div><div><dt>Familie &amp; Menschen</dt><dd>Verwandtschaftsbezeichnungen, einfache Vorstellungen und Beziehungen.</dd></div><div><dt>Essen &amp; Einkaufen</dt><dd>Lebensmittel, Bestellen, Mengen, Preise und Vorlieben.</dd></div><div><dt>Unterwegs sein</dt><dd>Nach Orten und Richtungen fragen, Fahrten und Treffpunkte klären.</dd></div><div><dt>Gesundheit &amp; Alltag</dt><dd>Grundlegende Beschwerden beschreiben und einfache Hilfe erfragen.</dd></div></dl></section>
<section class="practice" aria-labelledby="practice-title"><div class="practice__sample"><p>Asa ang sakayan?</p><span>Wo ist die Haltestelle?</span></div><div><p class="eyebrow">Üben ohne Druck</p><h2 id="practice-title">Sätze sind hilfreicher als isolierte Übersetzungen</h2><p>Vokabeln sind das Material, Satzmuster machen daraus Sprache. Wiederhole kurze, nützliche Sätze laut, verändere nur ein Wort und höre darauf, was du schon verstehst. Das Tempo darf klein sein: Zehn Minuten mit einem klaren Thema sind oft wirksamer als ein großer Stapel ungeordneter Begriffe.</p><p>Plane echte Begegnungen als Übungsraum ein. Bitte Gesprächspartnerinnen und Gesprächspartner um langsame Wiederholung, notiere Formulierungen, die dir begegnen, und akzeptiere, dass Fortschritt aus vielen kleinen Wiederholungen besteht.</p></div></section>
<section class="faq" aria-labelledby="faq-title"><p class="eyebrow">Kurz beantwortet</p><h2 id="faq-title">Häufige Fragen zum Bisaya-Lernen</h2><div class="faq__items"><details><summary>Ist Bisaya dasselbe wie Cebuano?</summary><p>Im Alltag wird „Bisaya“ oft für Cebuano verwendet. Der Begriff kann aber weiter gefasst sein und sich auf Sprachen der Visayas beziehen; für Lernmaterialien hilft deshalb ein Blick auf die jeweilige Region.</p></details><details><summary>Für wen lohnt es sich, Bisaya zu lernen?</summary><p>Bisaya ist hilfreich für Menschen mit Familie oder Freundschaften in Cebuano-sprachigen Regionen, für Reisen und für alle, die alltägliche Gespräche besser verstehen möchten.</p></details><details><summary>Wie fange ich als Anfänger sinnvoll an?</summary><p>Beginne mit häufigen Situationen und kurzen Satzmustern. Wiederhole sie regelmäßig, ergänze kleinen thematischen Wortschatz und nutze jede Gelegenheit zum Zuhören und Ausprobieren.</p></details></div><nav class="context-links" aria-label="Weiterführende Sprachlernseiten"><router-link to="/ratgeber/bisaya-grundlagen">Bisaya-Grundlagen</router-link><router-link to="/deutsch-fuer-bisaya">Deutsch für Bisaya-Sprecher</router-link><router-link to="/ratgeber/vokabeltrainer-alltag">Vokabeln im Alltag üben</router-link></nav></section>
<footer class="root-link"><router-link to="/">Zu Anmeldung und Registrierung auf YourPart <span aria-hidden="true">→</span></router-link></footer>
</main>
</template>
@@ -39,6 +22,6 @@ export default { name: 'BisayaLearningLandingView' };
</script>
<style scoped>
.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; }
@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; } }
.bisaya-landing { --ink:#213d36; --green:#296650; --pale:#e6efe5; --paper:#faf8ef; --sun:#dba54d; max-width:1120px; margin:0 auto; padding:32px 20px 88px; color:var(--ink); }h1,h2,h3,p { overflow-wrap:break-word; hyphens:auto; }.hero { display:grid; grid-template-columns:1.25fr .75fr; gap:50px; padding:clamp(35px,7vw,84px); background:linear-gradient(115deg,#f8f4e8 0%,#f8f4e8 63%,#dcebdd 63%); border-left:8px solid var(--green); }.eyebrow { margin:0 0 13px; color:#39765c; font-size:.75rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }h1,h2,h3 { letter-spacing:-.03em; }h1 { margin:0; max-width:720px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.3rem,4.7vw,4.4rem); line-height:1.01; }.lead { max-width:700px; margin:25px 0 0; font-size:1.1rem; line-height:1.75; }.hero__note { align-self:end; display:grid; grid-template-columns:1fr 1fr; gap:7px 17px; padding:23px; border:1px solid rgba(33,61,54,.25); background:rgba(255,255,255,.5); }.hero__note span { color:#34735a; font-weight:800; }.hero__note strong { font-weight:500; }.chapter { display:grid; grid-template-columns:110px minmax(0,720px); gap:clamp(28px,7vw,100px); max-width:970px; margin:88px auto; }.chapter__number { color:var(--sun); font-family:Georgia,serif; font-size:4.5rem; line-height:.9; }.chapter h2,.reasons h2,.path h2,.topics h2,.practice h2,.faq h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.9rem,3.3vw,3rem); line-height:1.08; }.chapter p:not(.eyebrow),.reasons p:not(.eyebrow),.practice p:not(.eyebrow) { margin:17px 0 0; line-height:1.75; }.text-link,.root-link a,.context-links a { display:inline-block; margin-top:22px; color:#27634d; font-weight:800; text-decoration-thickness:2px; text-underline-offset:4px; }.text-link:focus-visible,.root-link a:focus-visible,.context-links a:focus-visible,summary:focus-visible { outline:3px solid #1e6fa8; outline-offset:4px; }.reasons { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,9vw,130px); padding:70px clamp(28px,6vw,70px); background:var(--green); color:#f8f7ed; }.reasons .eyebrow { color:#dfc075; }.reasons__copy { max-width:520px; }.path { margin-top:88px; }.path>h2 { max-width:680px; }.path ol { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; margin:34px 0 0; list-style:none; border-top:1px solid #b9ccc0; }.path li { padding:22px 21px 5px 0; border-right:1px solid #b9ccc0; }.path li+li { padding-left:21px; }.path li:last-child { border-right:0; }.path li span { color:#ca9138; font-size:.78rem; font-weight:800; letter-spacing:.1em; }.path h3 { margin:18px 0 9px; font-size:1.1rem; }.path p { margin:0; line-height:1.65; font-size:.94rem; }.topics { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(35px,8vw,110px); margin-top:88px; padding-top:62px; border-top:6px solid var(--sun); }.topics__heading p:not(.eyebrow) { margin:17px 0 0; line-height:1.7; }.topics dl { margin:0; }.topics dl>div { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:16px 0; border-top:1px solid #c3d3c7; }.topics dt { font-weight:800; }.topics dd { margin:0; line-height:1.55; }.practice { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(35px,8vw,110px); align-items:center; margin-top:88px; padding:clamp(34px,6vw,70px); background:var(--paper); }.practice__sample { padding:34px 26px; background:var(--ink); color:#fffdf4; box-shadow:11px 11px 0 var(--sun); }.practice__sample p { margin:0 0 10px; font-family:Georgia,serif; font-size:clamp(1.5rem,3vw,2.25rem); }.practice__sample span { color:#c6dfce; }.faq { max-width:900px; margin:88px auto 0; }.faq__items { margin-top:25px; border-top:1px solid #b9ccc0; }.faq details { padding:19px 0; border-bottom:1px solid #b9ccc0; }.faq summary { cursor:pointer; font-weight:800; }.faq details p { max-width:760px; margin:13px 24px 0 0; line-height:1.7; }.context-links { display:flex; flex-wrap:wrap; gap:10px 30px; }.root-link { margin-top:76px; text-align:center; font-size:.95rem; }
@media (max-width:800px) { .hero,.reasons,.topics,.practice { grid-template-columns:1fr; }.hero { gap:35px; background:#f8f4e8; }.hero__note { max-width:360px; }.chapter { grid-template-columns:1fr; gap:20px; margin:60px auto; }.path { margin-top:60px; }.path ol { grid-template-columns:1fr 1fr; }.path li:nth-child(2) { border-right:0; }.path li:nth-child(n+3) { border-top:1px solid #b9ccc0; padding-top:23px; }.topics,.practice,.faq { margin-top:60px; } }@media (max-width:480px) { .bisaya-landing { padding:18px 12px 54px; }.hero { padding:31px 23px; }.path ol { grid-template-columns:1fr; }.path li,.path li+li { padding:20px 0; border-right:0; border-top:1px solid #b9ccc0; }.path li:first-child { border-top:0; }.topics dl>div { grid-template-columns:1fr; gap:5px; }.reasons,.practice { padding:31px 23px; }.root-link { margin-top:54px; } }
</style>

125
frontend/src/views/public/FalukantLandingView.vue
View File

@@ -2,95 +2,39 @@
<main class="falukant-landing">
<section class="hero" aria-labelledby="falukant-title">
<div class="hero__copy">
<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">
In Falukant führst du eine Figur durch eine lebendige mittelalterliche Spielwelt. Baue Besitz auf,
entwickle Unternehmen und entscheide, welchen Platz deine Familie in Gesellschaft und Politik einnimmt.
</p>
<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>
<p class="eyebrow">Eine mittelalterliche Wirtschaftssimulation</p>
<h1 id="falukant-title">Falukant: Wirtschaft, Familie und Einfluss im Mittelalter</h1>
<p class="lead">Falukant verbindet den Aufbau eines Besitzes mit einer sozialen Spielwelt. Produktion, Handel und Finanzen stehen nie für sich: Sie prägen, welche Möglichkeiten sich für Haus, Familie und gesellschaftlichen Einfluss eröffnen.</p>
<router-link class="text-link" to="/ratgeber/falukant-wirtschaft">Wirtschaft in Falukant verstehen <span aria-hidden="true">→</span></router-link>
</div>
<figure class="hero__image"><img src="/images/falukant/map.png" alt="Karte der mittelalterlichen Spielwelt von Falukant" /></figure>
</section>
<section class="section" aria-labelledby="loops-title">
<div class="section__heading">
<p class="section-label">Deine Entscheidungen zählen</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 class="feature">
<img src="/images/icons/falukant/family.png" alt="" />
<h3>Familie gestalten</h3>
<p>Bildung, Gesundheit, Beziehungen und gesellschaftlicher Rang begleiten die Geschichte deiner Figur und ihrer Familie.</p>
</article>
<article class="feature">
<img src="/images/icons/falukant/politics.png" alt="" />
<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 class="chapter chapter--intro" aria-labelledby="what-title">
<div class="chapter__marker">01 / Die Spielwelt</div>
<div class="chapter__body"><h2 id="what-title">Was Falukant ausmacht</h2><p>Falukant ist keine schnelle Abfolge einzelner Bauaufträge, sondern eine Wirtschaftssimulation mit persönlichem Rahmen. Ein Betrieb braucht Waren, Lagerraum, Absatz und einen Blick auf die eigenen Mittel. Zugleich bewegt sich das Haus in einer Welt aus Beziehungen, Bildung, Reputation und Ämtern.</p><p>So entsteht ein Spielverlauf, in dem Entscheidungen über längere Zeit nachwirken. Wer eine Richtung einschlägt, beobachtet Folgen, wägt Chancen ab und entwickelt die eigene Stellung Schritt für Schritt weiter.</p></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 class="image-band" aria-labelledby="economy-title">
<figure><img src="/images/falukant/houses.png" alt="Mittelalterliche Häuser und Betriebe in Falukant" /></figure>
<div class="image-band__copy"><p class="eyebrow">02 / Kreisläufe statt Einzelaktionen</p><h2 id="economy-title">Von der Produktion bis zur Kasse</h2><p>Wirtschaft beginnt mit der Frage, was ein Betrieb herstellen kann. Daraus folgen Rohstoffe und Produkte, Kapazitäten und Lagerbestände. Erst wenn Waren verfügbar sind, wird Handel möglich; Einnahmen und Ausgaben zeigen wiederum, ob die nächste Investition tragfähig ist.</p><p>Dieser Kreislauf macht Planung wichtig. Ein volles Lager, knappe Mittel oder ein schlecht gewählter Standort sind keine bloßen Zahlen, sondern Hinweise für den nächsten Zug. Wer Produktion, Vorräte, Verkauf und Finanzen gemeinsam betrachtet, baut nicht nur größer, sondern nachvollziehbar stabiler auf.</p><router-link class="text-link text-link--light" to="/ratgeber/falukant-wirtschaft">Ratgeber: Produktion, Lager und Verkauf <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 class="chapter chapter--split" aria-labelledby="family-title">
<div class="chapter__body"><p class="eyebrow">03 / Das Haus als Teil der Welt</p><h2 id="family-title">Familie, Bildung und gesellschaftlicher Rang</h2><p>Ein Besitz erzählt in Falukant auch eine Familiengeschichte. Beziehungen, Gesundheit, Bildung und der gesellschaftliche Status geben wirtschaftlichen Entscheidungen einen weiteren Kontext. Sie lenken den Blick darauf, wie ein Haus in seiner Umgebung wahrgenommen wird und welche Wege offenstehen.</p><p>Bildung und Ansehen sind dabei keine Dekoration. Sie gehören zu einer langfristigen Entwicklung, in der wirtschaftlicher Erfolg, persönliche Bindungen und gesellschaftliche Stellung zusammen gedacht werden.</p><router-link class="text-link" to="/ratgeber/falukant-familie-charakter">Familie und Charakter in Falukant <span aria-hidden="true">→</span></router-link></div>
<aside class="ledger" aria-label="Themenfelder der persönlichen Entwicklung"><span>Im Blick behalten</span><strong>Beziehungen</strong><strong>Bildung</strong><strong>Gesundheit</strong><strong>Status</strong></aside>
</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 class="chapter chapter--politics" aria-labelledby="politics-title">
<div class="chapter__marker">04 / Öffentliche Stellung</div>
<div class="chapter__body"><h2 id="politics-title">Reputation, Kirche, Adel und Politik</h2><p>Neben Handel und Hausstand besitzt Falukant eine öffentliche Ebene. Reputation beeinflusst, wie sichtbar eine Figur in der Spielwelt ist. Kirche, Adel und Politik eröffnen unterschiedliche Rollen, Verantwortungen und Fragen nach Einfluss.</p><p>Gerade weil diese Bereiche mit der wirtschaftlichen und persönlichen Entwicklung verbunden sind, lohnt sich ein weiter Blick: Nicht jede Gelegenheit muss sofort verfolgt werden. Langfristige Entscheidungen gewinnen an Gewicht, wenn sie zum eigenen Weg, zum Haus und zur gewünschten Rolle in der Gesellschaft passen.</p><router-link class="text-link" to="/ratgeber/falukant-politik-und-gesellschaft">Politik und Gesellschaft im Ratgeber <span aria-hidden="true">→</span></router-link></div>
</section>
<section class="overview" aria-labelledby="overview-title"><div><p class="eyebrow">Spielbereiche im Überblick</p><h2 id="overview-title">Vier Perspektiven auf eine lange Entwicklung</h2></div><ul><li><img src="/images/icons/falukant/workshop.png" alt="" /><span><strong>Wirtschaft</strong>Produktion, Lager, Handel und Finanzen abstimmen.</span></li><li><img src="/images/icons/falukant/family.png" alt="" /><span><strong>Haus &amp; Familie</strong>Beziehungen, Bildung und Status mitdenken.</span></li><li><img src="/images/icons/falukant/reputation.png" alt="" /><span><strong>Reputation</strong>Die eigene Stellung in der Spielwelt entwickeln.</span></li><li><img src="/images/icons/falukant/politics.png" alt="" /><span><strong>Gesellschaft</strong>Kirche, Adel und Politik als weitere Ebenen verstehen.</span></li></ul></section>
<section class="faq" aria-labelledby="faq-title"><p class="eyebrow">Kurz beantwortet</p><h2 id="faq-title">Häufige Fragen zu Falukant</h2><div class="faq__items"><details><summary>Was für ein Spiel ist Falukant?</summary><p>Falukant ist eine mittelalterliche Browser-Wirtschaftssimulation, in der wirtschaftliche Planung mit Familie, Reputation und gesellschaftlichen Entscheidungen verbunden ist.</p></details><details><summary>Welche Rolle spielt die Wirtschaft in Falukant?</summary><p>Produktion, Lagerung, Handel und Finanzen greifen ineinander. Entscheidungen in einem Bereich wirken sich auf die nächsten Möglichkeiten beim Ausbau des eigenen Besitzes aus.</p></details><details><summary>Warum sind langfristige Entscheidungen wichtig?</summary><p>Falukant verknüpft wirtschaftliche, persönliche und gesellschaftliche Bereiche. Deshalb lohnt es sich, Investitionen und öffentliche Ambitionen mit Blick auf die weitere Entwicklung abzuwägen.</p></details></div><nav class="context-links" aria-label="Weiterführende Falukant-Seiten"><router-link to="/ratgeber/falukant-wirtschaft">Falukant-Wirtschaft: Produktion, Lager und Verkauf</router-link><router-link to="/ratgeber/falukant-politik-und-gesellschaft">Einfluss, Amt und Verantwortung</router-link></nav></section>
<footer class="root-link"><router-link to="/">Zu Anmeldung und Registrierung auf YourPart <span aria-hidden="true">→</span></router-link></footer>
</main>
</template>
@@ -99,24 +43,7 @@ export default { name: 'FalukantLandingView' };
</script>
<style scoped>
.falukant-landing { --ink:#20261b; --moss:#34482a; --gold:#d4a950; --paper:#faf7ed; max-width:1180px; margin:0 auto; padding:32px 20px 80px; color:var(--ink); }
.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); }
.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); }
.eyebrow,.section-label { margin:0 0 12px; color:#74561f; font-weight:800; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; }
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__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:6px; font-weight:800; text-align:center; text-decoration:none; 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(--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); }
.hero__note { margin:18px 0 0; font-size:.9rem; line-height:1.5; color:#5b563f; }
.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); }
.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%; }
.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; }
.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; }
@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; } }
@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; } }
.falukant-landing { --ink:#20251c; --moss:#243a29; --fern:#4d6840; --gold:#b88c43; --paper:#f6f0e1; max-width:1160px; margin:0 auto; padding:32px 20px 88px; color:var(--ink); }
h1,h2,h3,p { overflow-wrap:break-word; hyphens:auto; }.hero { display:grid; grid-template-columns:1.05fr .95fr; background:var(--paper); border:1px solid #d8ccb2; box-shadow:0 18px 45px rgba(48,38,18,.13); }.hero__copy { padding:clamp(34px,6vw,76px); background:radial-gradient(circle at 4% 7%,rgba(184,140,67,.23),transparent 29%),var(--paper); }.eyebrow { margin:0 0 13px; color:#76571f; font-size:.75rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }h1,h2 { font-family:Georgia,'Times New Roman',serif; letter-spacing:-.035em; }h1 { margin:0; font-size:clamp(2.3rem,4.6vw,4.35rem); line-height:1.01; }.lead { margin:24px 0; font-size:1.08rem; line-height:1.72; }.hero__image { min-height:430px; margin:0; position:relative; overflow:hidden; background:var(--moss); }.hero__image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(22,34,19,.65)); }.hero__image img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.76) contrast(1.06); }.text-link,.root-link a { color:#38562e; font-weight:800; text-decoration-thickness:2px; text-underline-offset:4px; }.text-link--light { color:#f5dc9d; }.text-link:focus-visible,.root-link a:focus-visible,.context-links a:focus-visible,summary:focus-visible { outline:3px solid #1e6fa8; outline-offset:4px; }.chapter { display:grid; grid-template-columns:170px minmax(0,1fr); gap:clamp(25px,6vw,96px); margin:88px auto; max-width:1000px; }.chapter__marker { padding-top:9px; border-top:3px solid var(--gold); color:#6c5b36; font-size:.78rem; font-weight:800; letter-spacing:.1em; }.chapter__body { max-width:720px; }.chapter h2,.overview h2,.faq h2,.image-band h2 { margin:0; font-size:clamp(1.9rem,3.3vw,3rem); line-height:1.08; }.chapter p:not(.eyebrow),.image-band p:not(.eyebrow) { margin:17px 0 0; line-height:1.75; }.chapter .text-link { display:inline-block; margin-top:22px; }.image-band { display:grid; grid-template-columns:.9fr 1.1fr; background:var(--moss); color:#f9f4e7; }.image-band figure { min-height:440px; margin:0; }.image-band figure img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.7) sepia(.15); }.image-band__copy { padding:clamp(32px,5vw,68px); align-self:center; }.image-band .eyebrow { color:#e8c478; }.chapter--split { align-items:center; }.ledger { display:grid; gap:0; padding:28px; background:#ede1c6; border-top:5px solid var(--gold); box-shadow:10px 10px 0 #35492e; }.ledger span { margin-bottom:12px; color:#6b572d; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.ledger strong { padding:11px 0; border-top:1px solid rgba(51,62,37,.2); font-family:Georgia,serif; font-size:1.25rem; }.chapter--politics { padding:58px 0; border-top:1px solid #dbcfb8; border-bottom:1px solid #dbcfb8; }.overview { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; margin-top:82px; padding:50px 0; }.overview ul { display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:0; margin:0; list-style:none; border-left:1px solid #d6cab4; border-top:1px solid #d6cab4; }.overview li { display:flex; gap:14px; padding:19px; border-right:1px solid #d6cab4; border-bottom:1px solid #d6cab4; }.overview img { width:34px; height:34px; object-fit:contain; }.overview span { font-size:.92rem; line-height:1.45; }.overview strong { display:block; margin-bottom:3px; font-size:1rem; }.faq { max-width:900px; margin:82px auto 0; }.faq__items { margin-top:25px; border-top:1px solid #cfc3ad; }.faq details { padding:19px 0; border-bottom:1px solid #cfc3ad; }.faq summary { cursor:pointer; font-weight:800; }.faq details p { max-width:760px; margin:13px 24px 0 0; line-height:1.7; }.context-links { display:flex; flex-wrap:wrap; gap:13px 30px; }.context-links a { margin-top:22px; color:#38562e; font-weight:800; text-decoration-thickness:2px; text-underline-offset:4px; }.root-link { margin-top:76px; text-align:center; font-size:.95rem; }
@media (max-width:800px) { .hero,.image-band,.overview { grid-template-columns:1fr; }.hero__image { min-height:285px; }.image-band figure { min-height:285px; }.chapter { grid-template-columns:1fr; gap:18px; margin:60px auto; }.chapter__marker { max-width:190px; }.chapter--politics { padding:44px 0; }.overview { gap:25px; margin-top:60px; }.faq { margin-top:60px; } }@media (max-width:480px) { .falukant-landing { padding:18px 12px 54px; }.hero__copy,.image-band__copy { padding:30px 23px; }.overview ul { grid-template-columns:1fr; }.chapter { margin:46px auto; }.root-link { margin-top:54px; } }
</style>