Fix footer tab highlighting logic for improved navigation

Reviewed-on: #1

.gitea/workflows/pages-deploy.yaml

@@ -0,0 +1,56 @@
+name: Deploy Jekyll site to Pages
+
+on:
+  push:
+    branches:
+      - develop
+
+  workflow_dispatch:
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    env:
+      RUBY_VERSION: "3.3.8"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: "develop"
+      - name: checkout pages
+        uses: actions/checkout@v4
+        with:
+          ref: "pages"
+          path: "pages"
+      - name: Setup Ruby
+        run: |
+          apt-get update
+          apt-get install curl wget tar build-essential zlib1g-dev gpg -y
+          curl -sSL https://rvm.io/mpapis.asc | gpg --import -
+          curl -sSL https://rvm.io/pkuczynski.asc | gpg --import -
+          curl -sSL https://get.rvm.io | bash -s stable
+          source /etc/profile.d/rvm.sh
+          rvm mount -r https://git.morlana.online/api/packages/Morlana/generic/ruby-ubuntu-22.04-aarch64/$RUBY_VERSION/ruby-$RUBY_VERSION.tar.bz2
+          rvm use $RUBY_VERSION && ruby -v && gem -v
+          gem install bundler jekyll webrick
+      - name: Build with Jekyll
+        run: |
+          source /etc/profile.d/rvm.sh
+          rvm use $RUBY_VERSION && ruby -v && gem -v
+          bundle install
+          bundle exec jekyll build --destination pages
+        env:
+          JEKYLL_ENV: production
+      - name: push pages
+        run: |
+          cp renovate.json pages/.
+          cd pages
+          git config user.name "${{ gitea.actor }}"
+          git config user.email ""${{ gitea.actor }}"@noreply.git.morlana.online"
+          git add .
+          git commit -m "jekyll build from Action ${GITHUB_SHA}"
+          git push

.prettierignore

@@ -0,0 +1 @@
+*.md

Gemfile

@@ -9,7 +9,7 @@ source "https://rubygems.org"
 # Happy Jekylling!
 gem "jekyll", "~> 4.4.1"
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
-gem "jekyll-theme-cyberpunk", "~> 0.1.0"
+gem "jekyll-theme-cyberpunk", path: "."
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
 # uncomment the line below. To upgrade, run `bundle update github-pages`.
 # gem "github-pages", group: :jekyll_plugins

Gemfile.lock

@@ -1,3 +1,9 @@
+PATH
+  remote: .
+  specs:
+    jekyll-theme-cyberpunk (0.1.0)
+      jekyll (>= 4.4.1)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -68,8 +74,6 @@ GEM
       jekyll (>= 3.7, < 5.0)
     jekyll-sass-converter (3.1.0)
       sass-embedded (~> 1.75)
-    jekyll-theme-cyberpunk (0.1.0)
-      jekyll (>= 4.4.1)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     json (2.10.2)
@@ -155,7 +159,7 @@ DEPENDENCIES
   http_parser.rb (~> 0.6.0)
   jekyll (~> 4.4.1)
   jekyll-feed (~> 0.12)
-  jekyll-theme-cyberpunk (~> 0.1.0)
+  jekyll-theme-cyberpunk!
   tzinfo (>= 1, < 3)
   tzinfo-data
   wdm (~> 0.1)

_config.yml

@@ -1,17 +1,5 @@
 # Welcome to Jekyll!
 #
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-#
-# If you need help with YAML syntax, here are some quick references for you:
-# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
-# https://learnxinyminutes.com/docs/yaml/
-#
 # Site settings
 # These are used to personalize your new site. If you look in the HTML files,
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
@@ -22,8 +10,8 @@ title: ThePhoenixDivision
 email: contact@morlana.net
 description: >-
   We will share our adventures in Cyberpunk Red here.
-baseurl: "/cpred" # the subpath of your site, e.g. /blog
-url: "https://phoenixdivision.morlana.space" # the base hostname & protocol for your site, e.g. http://example.com
+baseurl: "/cpred"
+url: "https://phoenixdivision.morlana.space"
 twitter_username: abc
 github_username:  abc
 
@@ -40,22 +28,6 @@ collections:
     output: true
     permalink: /:name/
 
-# Exclude from processing.
-# The following items will not be processed, by default.
-# Any item listed under the `exclude:` key here will be automatically added to
-# the internal "default list".
-#
-# Excluded items can be processed by explicitly listing the directories or
-# their entries' file path in the `include:` list.
-#
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
+footer_links:
+  - title: "Impressum"
+    url: "https://legal.thephoenixdi.vision"

_includes/attributes-overview.html

@@ -0,0 +1,58 @@
+<h2 class="cyber-h">Attribute</h2>
+
+<h3 class="cyber-h">Was sind Attribute?</h3>
+<p>Attribute (kurz ATT) sind Werte, welche die Fähigkeiten eines Charakters zu allen anderen im Spieluniversum ins Verhältnis setzen. Attribute helfen dabei, die Fähigkeiten der Charaktere vergleichbar zu machen. In einer <b>Cyberpunk-RED-Kampagne</b> weisen die Charaktere zehn Hauptattribute aus vier Gruppen auf: <b>Geistig</b>, <b>Kampf</b>, <b>Schicksal</b> und <b>Körperlich</b>.</p>
+
+<h4 class="cyber-h">Geistige Gruppe</h4>
+<ul>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Wie schlau du allgemein bist: Schlauheit, Aufmerksamkeit, Wahrnehmung, Lernfähigkeit.">Intelligenz (INT)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Deine Entschlossenheit und Fähigkeit, mit Gefahren und Stress umzugehen. Beeinflusst Mut und Durchhaltevermögen.">Wille (WIL)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Wie gut du mit Druck und sozialen Situationen umgehen kannst, inkl. Ausstrahlung.">Coolness (COOL)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Fähigkeit, dich in andere hineinzuversetzen und sozial zu handeln. Nimmt durch Cyberware ab.">Empathie (EMP)</span></li>
+</ul>
+
+<h4 class="cyber-h">Kampfgruppe</h4>
+<ul>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Fähigkeit, mit Werkzeugen und Technik umzugehen – z. B. Hacking, Reparatur.">Technik (TECH)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Reaktionszeit und Koordination – wichtig fürs Zielen, Ausweichen und schnelle Aktionen.">Reflexe (REF)</span></li>
+</ul>
+
+<h4 class="cyber-h">Schicksalsgruppe</h4>
+<ul>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Repräsentiert dein Glück – kann für Würfe verwendet werden und regeneriert sich pro Sitzung.">Glück (GLK)</span></li>
+</ul>
+
+<h4 class="cyber-h">Körperliche Gruppe</h4>
+<ul>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Wie robust du bist: Körpermasse, Widerstandsfähigkeit, Schadenseinstecken.">Kraft (KRA)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Deine Koordination und Fähigkeit für physische Aufgaben, wie Nahkampf, Balance, Parcours.">Geschicklichkeit (GES)</span></li>
+  <li><span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Wie schnell du dich bewegst – Laufen, Springen, Schwimmen.">Bewegung (BEW)</span></li>
+</ul>
+
+<h4 class="cyber-h">Menschlichkeit (MEN)</h4>
+<p>
+  <span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Ein Maß für deine emotionale Stabilität. Nimmt durch Trauma oder Cyberware ab.">
+    Menschlichkeit
+  </span> wird aus 
+  <span class="oxanium-font tooltipped" data-position="bottom" data-tooltip="Fähigkeit, sich in andere hineinzuversetzen und sozial zu interagieren.">Empathie (EMP)</span> × 10 
+  berechnet.
+</p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr><th>Empathie (EMP)</th><th>Menschlichkeit (MEN)</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>1</td><td>10</td></tr>
+    <tr><td>2</td><td>20</td></tr>
+    <tr><td>3</td><td>30</td></tr>
+    <tr><td>4</td><td>40</td></tr>
+    <tr><td>5</td><td>50</td></tr>
+    <tr><td>6</td><td>60</td></tr>
+    <tr><td>7</td><td>70</td></tr>
+    <tr><td>8</td><td>80</td></tr>
+    <tr><td>9</td><td>90</td></tr>
+    <tr><td>10</td><td>100</td></tr>
+  </tbody>
+</table>
+<p>Sinkt die Menschlichkeit um mehr als 10 Punkte, sinkt auch <b>EMP</b> (z. B. bei 39 MEN fällt EMP auf 3).</p>

_includes/character-profile.html

@@ -0,0 +1,27 @@
+<div class="cyber-tile cyber-tile-big {{ include.bg_color }} {{ include.fg_color }} {{ include.class }}" style="min-height: auto;">
+  {% if include.image %}
+  <img class="responsive-img" src="{{ include.image | relative_url }}" alt="Character Picture">
+  {% endif %}
+  <p><span class="cyberpunk-font">Name:</span>&nbsp;&nbsp;<span id="name-{{ include.id }}"></span></p>
+  <p><span class="cyberpunk-font">Handle:</span>&nbsp;&nbsp;<span id="streetname-{{ include.id }}"></span></p>
+  <p><span class="cyberpunk-font">Role:</span>&nbsp;&nbsp;<span id="role-{{ include.id }}"></span></p>
+  <p><span class="cyberpunk-font">Age:</span>&nbsp;&nbsp;<span id="age-{{ include.id }}"></span></p>
+  {% if include.page %}
+  <button class="cyber-button bg-purple fg-white" onclick="window.location.href='{{ include.page | relative_url }}'">
+    Screamsheet
+    <span class="glitchtext">teehsmaercS</span>
+    <span class="tag">NETR</span>
+  </button>
+  {% endif %}
+</div>
+<script>
+  fetch("{{ '/assets/game-data/characters/' | append: include.id | append: '.json' | relative_url }}")
+    .then(response => response.json())
+    .then(character => {
+      document.getElementById('name-{{ include.id }}').innerText = character.name;
+      document.getElementById('streetname-{{ include.id }}').innerText = character.handle;
+      document.getElementById('age-{{ include.id }}').innerText = character.age;
+      const mainRole = character.roles.find(role => role.main);
+      document.getElementById('role-{{ include.id }}').innerText = mainRole.name + " Rang: " + mainRole.rank;
+    });
+</script>

_includes/footer.html

@@ -1,12 +1,19 @@
-<div class="cyber-razor-top bg-black" style="width: 100%"></div>
-<script
-			  src="https://code.jquery.com/jquery-3.7.1.min.js"
-			  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
-			  crossorigin="anonymous"></script>
-<script src="{{ "/assets/js/materialize.min.js" | relative_url }}"></script>
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    var sidenavElems = document.querySelectorAll('.sidenav');
-    var sidenavInstances = M.Sidenav.init(sidenavElems, {});
-  });
-</script>
+<footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 {% if page.url == "/" %}bg-red{% else %}bg-dark{% endif %}"><a href="{{ "/" | relative_url }}" class="cyber-a"><i class="material-icons">home</i></a></li>
+    {% for tab in sorted_pages %}
+      {% if tab.title and tab.permalink and tab.nav != false %}
+        <li class="tab col s1 {% if page.url contains tab.url %}bg-red{% else %}bg-dark{% endif %}">
+          <a href="{{ tab.url | relative_url }}" target="_self" class="cyber-a">
+            {% if tab.icon %}
+              <i class="material-icons">{{ tab.icon }}</i>
+            {% else %}
+              {{ tab.title }}
+            {% endif %}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+  <span></span>
+</footer>

_includes/head.html

@@ -2,6 +2,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{ page.title }} - {{ site.title }}</title>
 
+<link rel="manifest" href="{{ '/assets/manifest.json' | relative_url }}">
+<meta name="theme-color" content="#ff003c">
+
 <!-- Stylesheets -->
 <link rel="stylesheet" href="{{ "/assets/css/normalize.css" | relative_url }}">
 <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">

_includes/header.html

@@ -1,36 +1,39 @@
 {% assign menu_pages = site.pages | where_exp: "page", "page.path contains 'pages/'" %}
 {% assign sorted_pages = menu_pages | sort: "weight" %}
 <header>
-  <nav class="cyber-razor-bottom bg-black">
-    <div class="nav-wrapper">
-      <a href="{{ "/" | relative_url }}" class="cyberpunk-font-og f-x2-5">{{ site.title }}</a>
-      <a href="#" data-target="mobile-menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
-      <ul id="nav-mobile" class="right hide-on-med-and-down">
-        <li><a href="{{ "/" | relative_url }}" class="cyber-a">Home</a></li>        
-        {% for page in sorted_pages %}
-          {% if page.title and page.permalink and page.nav != false %}
-            <li><a href="{{ page.url | relative_url }}" class="cyber-a">{{ page.title }}</a></li>
-          {% endif %}
-        {% endfor %}
-      </ul>
-    </div>
-    <ul class="sidenav" id="mobile-menu">
-      <li>
-        <button class="cyber-button bg-red fg-white m-2 vt-bot">
-          Home
-        </button>
-      </li>
-      {% for page in sorted_pages %}
-        {% if page.title and page.permalink and page.nav != false %}
-          <li>
-            <button class="cyber-button bg-red fg-white m-2 vt-bot">
-              {{ page.title }}
-              <span class="glitchtext">$_glitch;</span>
-              <span class="tag"></span>
-            </button>
-          </li>
-        {% endif %}
-      {% endfor %}
-    </ul>
-  </nav>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="{{ "/" | relative_url }}" class="cyberpunk-font-og f-x2-5">{{ site.title }}</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="{{ "/" | relative_url }}" class="cyber-a{% if page.url == "/" %} fg-yellow{% endif %}">Home</a></li>
+          {% for tab in sorted_pages %}
+            {% if tab.title and tab.permalink and tab.nav != false %}
+              <li><a href="{{ tab.url | relative_url }}" class="cyber-a{% if page.url contains tab.url %} fg-yellow{% endif %}">{{ tab.title }}</a></li>
+            {% endif %}
+          {% endfor %}
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="{{ "/" | relative_url }}">Home</a>
+
+    {% assign segments = page.url | split: "/" %}
+    {% assign path = "" %}
+
+    {% for segment in segments offset: 1 %}
+      {% assign path = path | append: "/" | append: segment %}
+      {% assign breadcrumb_page = site.pages | where: "url", path | first %}
+
+      {% if breadcrumb_page and breadcrumb_page.title %}
+        › <a href="{{ path | relative_url }}">{{ breadcrumb_page.title }}</a>
+      {% else %}
+        › <span>{{ segment }}</span>
+      {% endif %}
+    {% endfor %}
+  </div>
+  -->
 </header>

_includes/player-guide.html

@@ -0,0 +1,348 @@
+<h2 class="cyber-h">Die Umgebung checken</h2>
+
+<p>
+  Dein Charakter kann grundsätzlich mit allem interargieren was er mit bloßem Auge oder durch den Zielsucher seiner
+  Waffe sehen kann. Befindet sich etwas zwischen dir und deinem Ziel ist es blockiert und du kannst nicht mit ihm
+  interargieren.
+  Alles was sich vor deinen zwei Schultern befindet, kannst du sehen und möglicherweise mit ihm interargieren. Und was
+  sich in Griffweite (2 Meter / 1 Feld) befindet, kannst du berühren. Für alles außerhalb brauchst du ein längeres
+  Werkzeug, eine Waffe oder eine andere Möglichkeit, um deine Reichweite zu erhöhren.
+</p>
+<p>
+  <b>Maßangaben</b><br>
+  In Cyberpunk RED wird ausschließlich das metrische System verwendet. Wenn Bodenpläne und Miniaturen verwendet werden,
+  dann entspricht jedes Feld 2 Metern.
+</p>
+
+<h2 class="cyber-h">Entfernung und Bewegung</h2>
+
+<p>Es werden 3 Bewegungsskalierungen verwendet.</p>
+
+<h3 class="cyber-h">Narrative Bewegung</h3>
+
+<p>
+  Die erste Skalierung ist die <b>Narrative Bewegung</b>. Immer wenn im Abenteuer eine Beschreibung (Narrativ) verwendet
+  wird, also wenn etwa der Spielleiter eine Situation schildet oder wenn die Spieler im Abenteuer untereinander reden,
+  wird eine Bewegung in realen Begriffen ausgedrückt.<br>
+  Zum Beispiel: Autos bewegen sich in Kilometern pro Stunde, Gehen wird in ähnlichen, wenn auch kleinerem Maß
+  gemessen.<br>
+  Zu Spielzwecken werden diese Bewegungsarten in Kategorien eingeteilt.
+</p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Fortbewegung</th>
+      <th>km/h</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Gehen</td>
+      <td>4</td>
+    </tr>
+    <tr>
+      <td>Rennen</td>
+      <td>11</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 class="cyber-h">Relative Bewegung</h3>
+
+<p>
+  Die zweite Skalierung ist die <b>Relative Bewegung</b>.<br>
+  Dabei wird ein <code>BEW</code> Attribut mit einem anderen <code>BEW</code> Attribut verglichen, um zu bestimmen, wer
+  grundsätzlich schneller ist. Sie eignet Dabei wird ein <code>BEW</code> Attribut mit einem anderen <code>BEW</code>
+  Attribut verglichen, um zu bestimmen, wer grundsätzlich schneller ist.
+  Sie eignet sich für einfache, längere Geschwindigkeitsvergleich, beispielsweise um das Ergebnis eines Wettrennens zu
+  bestimmen. Damit wird der Lamborghini mit dem Volkswagen verglichen:<br>
+  Der <code>BEW</code> Wert des einen ist höher als der des anderen und das bildet die Vergleichsgrundlage.
+</p>
+
+<h3 class="cyber-h">Absolute Bewegung</h3>
+
+<p>
+  Schließlich gibt es noch die <b>Absolute Bewegung</b>:<br>
+  Ein Maß für die tatsächliche Entfernung, das im Kampf und bei der Verwendung von Minaturen zum Einsatz kommt. In jedem
+  Zug erhält ein Charakter eine Bewegungsaktion, die ausschließlich dazu dient, sich bis zu <code>BEW x 2 Meter</code>
+  bzw. <code>BEW x 1 Feld</code> zu bewegen (auch diagonal).<br>
+  Bewegungsaktionen sowie alle anderen Aktionen, die ein Charakter in einem Zug durchführen kann, werden weiter unten im
+  Abschnitt "Du bist dran" beschrieben.
+</p>
+
+<h2 class="cyber-h">Zeit und Initiative</h2>
+
+<p>
+  In Cyberpunk RED wird die Zeit in zweierlei Methoden gemessen. Die erste (die <b>Rollenspielzeit</b>) läuft so ab, wie
+  du es im echten Leben gewohnt bist.<br>
+  Die zweite (die <b>Kampfzeit</b>), wird wesentlich detaillierter gemessen. Die Kampfzeit wird in <b>Züge</b>
+  unterteilt, von denen jeder ungefähr <code>3 Sekunden</code> dauert. Die Zeit, die jeder Kampfbeteiligte benötigt, um
+  einen Zug zu machen, wird <b>Runde</b> genannt.
+  Weil Aktionen im Spiel ungefähr gleichzeitig ablaufen, dauert jede Runde ebenfalls gut <code>3 Sekunden</code>.
+</p>
+
+<h3 class="cyber-h">Initiative</h3>
+
+<p>
+  Aber wer fängt an? Dafür müssen wir die <code>Initiative</code> bestimmen - im Grunde eine <i>Warteschlange</i>, in
+  der die Charaktere stehen und relativ zueinander während eines Zuges handeln. Diese <i>Warteschlange</i> nennen wir
+  den <b>Initiativdurchgang</b>: eine geistige Aufstellung, wer wann loslegt.
+</p>
+
+Zu Beginn eines Kampfes wüfeln alle ihre Initiative aus:<br>
+<div class="code-block" data-title="Dein Initiativwert">REF + 1W10</div>
+
+<p>
+  Alle Kampfteilnehmer reihen sich nach ihrem Initiativwert in absteigender Reihenfolge (höchsten bis niedrigsten) in
+  die Reihenfolge ein. Kommt es zum Gleichstand, wird erneut gewürfelt.
+</p>
+
+<h2 class="cyber-h">Du bist dran</h2>
+
+<h3 class="cyber-h">Aktionen in Kürze</h3>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Aktion</th>
+      <th>Einsatz</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Bewegungsaktion</td>
+      <td>In jdem Zug bewegst du dich so viele Meter wie <code>BEW</code> x 2m bzw. so viele Felder wie dein
+        <code>BEW</code>
+      </td>
+    </tr>
+    <tr>
+      <td>Angreifen</td>
+      <td>Einen Nahkampf- oder Fernkampfangriff durchführen</td>
+    </tr>
+    <tr>
+      <td>Würgen</td>
+      <td>Einen Gegner würgen, den du gepackt hast.</td>
+    </tr>
+    <tr>
+      <td>Schild ausrüsten / fallen lassen</td>
+      <td>Es kostet eine Aktion einen Schild auszurüsten oder fallenzulassen.</td>
+    </tr>
+    <tr>
+      <td>In ein Fahrzeug einsteigen</td>
+      <td>In ein Fahrzeug einsteigen.</td>
+    </tr>
+    <tr>
+      <td>Aufstehen</td>
+      <td>Aus dem Liegen aufstehen. Wenn du liegst, musst du erst diese Aktion aufwenden, um eine Bewegungsaktion
+        durchzuführen.</td>
+    </tr>
+    <tr>
+      <td>Packen</td>
+      <td>Einen Gegner packen und festhalten oder ihm einen Gegenstand wegnehmen, den er trägt.</td>
+    </tr>
+    <tr>
+      <td>Aktion hinauszögern</td>
+      <td>Aktion bis zu einem späteren Zeitpunkt im Initiativdurchgang hinauszögern. Du musst ein bestimmtes Ergeignis
+        als Auslöser oder einen bestimmten Wert im Initiativdurchgang wählen, wann die Aktion beginnt, welche es ist und
+        wen sie betrifft.</td>
+    </tr>
+    <tr>
+      <td>Menschlicher Schild</td>
+      <td>Verwende einen Gegner, den du gepackt hast, als Mneschlichen Schild.</td>
+    </tr>
+    <tr>
+      <td>Nachladen</td>
+      <td>Ein Magazin mit einer einzigen Munitionsart vollständig nachladen und wechseln.</td>
+    </tr>
+    <tr>
+      <td>Laufen</td>
+      <td>Du führst eine zusätzliche Bewegungsaktion durch, aber nur dann, wenn du bereits eine Bewegungsaktion in
+        diesem Zug durchgeführt hast.</td>
+    </tr>
+    <tr>
+      <td>Fahrzeug starten</td>
+      <td>Starte ein Fahrzeug, um dessen BEW zu nutzen und im Initiativdurchgang an die erste Stelle zu springen.</td>
+    </tr>
+    <tr>
+      <td>Stabilisieren</td>
+      <td>Stabilisiere ein Ziel, um den natürlichen Heilungsprozess in Gang zu setzen, oder aus dem Verwundungszustand
+        <i>Tödlich Verletzt</i> zu holen, um sein Leben zu retten.
+      </td>
+    </tr>
+    <tr>
+      <td>Wurf</td>
+      <td>Einen gepackten Gegner zu Boden werden oder einen Gegenstand werfen.</td>
+    </tr>
+    <tr>
+      <td>NET-Aktionen durchführen</td>
+      <td>Führe innerhalb des NET <b>mehrere</b> NET-Aktionen durch.</td>
+    </tr>
+    <tr>
+      <td>Gegenstand benutzen</td>
+      <td>Mit einem Gegenstand interargieren ohne eine Fertigkeit einzusetzen. Für das Ziehen einer leicht zugänglichen
+        Waffe mit einer freien Hand oder das Fallenlassen einer gehaltenen Waffe (nicht eines Schildes) ist keine Aktion
+        nötig, allerdings für das Wegstecken einer Waffe an deinen Körper schon.</td>
+    </tr>
+    <tr>
+      <td>Fertigkeit einsetzen</td>
+      <td>Eine Fertigkeit einsetzen, um eine kurze Aufgabe zu erledigen. Eine längere Aufgabe erfordert mehrere Aktionen
+        im Verlauf mehrerer Züge und wird erst ausgewürfelt, nachdem die volle Einsatzzeit in 3-Sekunden-Abschnitten
+      </td>
+    </tr>
+    <tr>
+      <td>Fahrzeugmanöver</td>
+      <td>Wende beim Fahren deine Aktion auf, um dich gänzlich auf ein gefährliches Maöver zu konzentrieren.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 class="cyber-h">Aktionen im Einzelnen</h3>
+
+<h4 class="cyber-h">Bewegungsaktion</h4>
+
+<p>In jedem Zug darf sich ein Charakter bewegen. Die Bewegungsreichweite beträgt <strong>BEW × 2</strong> Meter (bzw.
+  Felder). Es darf auch diagonal gegangen werden.</p>
+<ul class="cyber-ul">
+  <li>Wenn du liegst, musst du zuerst die Aktion <em>Aufstehen</em> verwenden, um dich zu bewegen.</li>
+  <li>Du kannst deine Aktion in einer Runde zwischen Bewegung und Angriffen aufteilen, z. B. gehen → schießen →
+    weitergehen.</li>
+  <li>Angriffe aus zwei verschiedenen AF2-Quellen (z. B. Pistole links, Machete rechts) können in einer Runde
+    kombiniert werden.</li>
+</ul>
+
+<h5 class="caber-h">Bewegung und Angriffsfolge aufteilen</h5>
+
+<p>
+  Jeder Charakter erhält in seinem Zug eine <b>Bewegungsaktion</b> und eine <b>Aktion</b>.<br>
+  <b>Bewegungsaktionen</b> lassen sich aufteilen, da der Kampf in Cyberpunk RED schnell und flüssig ist. Immer wenn du
+  dich mithilfe deiner Bewegungsaktion bewegst, kannst du deine Aktion während dieser Bewegungsaktion durchführen und
+  dich danach weiterbewegen.<br>
+  <b>Das wird Aufteilen genannt - und das gilt nicht nur für Bewegungsaktionen.</b>
+</p>
+
+<p>
+  Manche Angriffsarten sind schneller als andere, so dass man mit einer einzigen Angreifen-Aktion zweimal
+  zuschlagen/schießen kann. Diese werden Angriffsfolge-2-Angriffe (kurz: <code>AF2</code>) genannt. Alle Angriffe, die
+  durch AF2-Quellen erfolgen, können im Verlauf einer Bewegungsaktion <i>aufgeteilt</i> werden.<br>
+  <i>Du kannst dich bewegen, schießen, dich bewegen, schießen, dich bewegen.</i><br>
+  Du kannst sogar jeweils einen ANgriff mit zwei verschiedenen AF2-Quellen durchführen, indem du deine beiden Angriffe
+  über über beide Aktionen "aufteilst", wodurch du beide in einem einzigen Zug einsetzen kannst.<br>
+  <span class="cyber-att-2">Ja, genau: Du kannst mit der Schweren Pistole in deiner linken Hand den Gang hinunterfeuern
+    und dann diesen diesen ekelhaften Gang entlanggehen und dein Opfer mit der Machete in deiner rechten Hand
+    erstechen.</span>
+</p>
+
+<h5 class="cyber-h">Andere Bewegungsarten</h5>
+
+Schwimmen, Kleetern und Springen mit Anlauf kosten 2 Meter für jeden zurückgelegten Meter (2 Felder pro zurückgelegten
+Feld). Wenn du aus dem Stand springst, legst du die Hälfte der Distanz zurück, die du mit ANlauf gesprungen wärst.
+
+<h4 class="cyber-h">Gezielte Schüsse</h4>
+
+<p>Gezielte Angriffe sind Fern- oder Nahkampfangriffe auf bestimmte Trefferzonen, mit einem Malus von –8. Du musst
+  dafür deine gesamte Aktion aufwenden.</p>
+<table class="cyber-table ac-red">
+  <tr>
+    <th>Ziel</th>
+    <th>Effekt</th>
+  </tr>
+  <tr>
+    <td>Kopf</td>
+    <td>Schaden, der die Kopfrüstung durchdringt, wird verdoppelt.</td>
+  </tr>
+  <tr>
+    <td>Gehaltenes Objekt</td>
+    <td>Objekt fällt zu Boden, wenn Schaden die Panzerung durchdringt.</td>
+  </tr>
+  <tr>
+    <td>Bein</td>
+    <td>Kritische Verletzung „Gebrochenes Bein“, wenn Schaden durchgeht.</td>
+  </tr>
+</table>
+
+<h4 class="cyber-h">Ziehen, Fallenlassen und Wegstecken</h4>
+
+<p>
+  Das Zeiehen einer leicht zugänglichen Waffe mit einer freien Hand ist keine Aktion. Auch das Fallenlassen einer
+  gehaltenen Waffe ist keine Aktion. Das Wegstecken an deinem Körper allerdings ist eine Aktion.
+</p>
+<p><strong>Mit einer Ausnahme: Das Ausrüsten und Fallenlassen eines Schilds kostet eine Aktion!</strong></p>
+
+<h4 class="cyber-h">Nachladen</h4>
+
+<p>Du kannst eine Aktion aufwenden, um ein Magazin mit einer einzigen Munitionsart vollständig zu laden und zu wechseln.
+</p>
+<p>Du kannst keine Munitionsarten in einem Magazin mischen.</p>
+
+<h3 class="cyber-h">Fernkampf</h3>
+
+<p>Ein Fernkampfangriff wird durch einen Wurf mit deiner REF + Waffenfertigkeit + 1W10 ausgeführt. Trifft dein Wurf
+  das Ziel, wird der Schaden berechnet. Die Panzerung des Ziels reduziert den Schaden.</p>
+<h4 class="cyber-h">Automatisches Feuer</h4>
+<p>Automatisches Feuer kostet eine Aktion und verbraucht 10 Schuss. Es kann nicht eingesetzt werden, wenn weniger
+  Munition im Magazin ist. Kein gezielter Schuss möglich.</p>
+<p>Wenn du triffst, wirfst du 2W6 für Schaden und multiplizierst mit der Differenz zwischen deinem Wurf und dem
+  Zielwurf (max. durch Waffe bestimmt).</p>
+<h4 class="cyber-h">Unterdrückungsfeuer</h4>
+<p>Unterdrückungsfeuer zwingt Gegner, sich zu ducken oder Deckung zu suchen. Es kostet 1 Aktion und 10 Schuss. Ziele
+  in Reichweite müssen einen Wurf ablegen, um stehen zu bleiben. Bei Misserfolg versuchen sie in Deckung zu gehen.</p>
+<h4 class="cyber-h">Schrot, Sprengsätze &amp; Spezialfälle</h4>
+<p>Schrotflinten können Schrotpatronen verschießen, die in einem Kegel von 3 Feldern Schaden verursachen. Alle
+  getroffenen Ziele erhalten Schaden.</p>
+<p>Sprengsätze verursachen Schaden in einem Bereich (5x5 Felder). Der Schaden wird nur einmal gewürfelt. Reflexstarke
+  Ziele können versuchen, der Explosion zu entgehen.</p>
+
+<h3 class="cyber-h">Nahkampf</h3>
+
+<div class="code-block" data-title="Nahkampf abwickeln">
+  GES des Angreifers + passende Nahkampfwaffenfertigkeit + 1W10<br>
+  <b>GEGEN</b><br>
+  GES des Verteidigers + Fertigkeit Ausweichen + 1W10
+</div>
+
+<p>
+  Schwere Nahkampfwaffen ignorieren die halbe Panzerung. Sehr schwere Waffen benötigen beide Hände und zählen als AF2.
+</p>
+
+<p>Mit Ausnahme sehr schwerer Nahkampfwaffen gilt für jeden Nahkampf AF2, es können also mit jeder Angriffsaktion 2
+  Schläge ausgeführt werden.</p>
+<p><b>Ziele müssen sich innerhalb der Reichweite (2 Meter / 1 Feld) befinden.</b></p>
+
+<p>
+  Wenn du den Wurf des Verteidigers übertriffst (bei Gleichstand gewinnt der Verteidiger), richtest du Schaden am
+  Verteidiger an.<br>
+  Die Panzerung des Verteidigers reduziert den von dir verursachten Schaden, und der Rest wird dem Verteidiger als
+  Schaden zugefügt.<br>
+</p>
+
+<h4 class="cyber-h">Faustkampf, Boxen mit blosser Faust, Packen, Würgen, Wurf</h4>
+
+<p>Wenn du jemanden packst, musst du GES + Fertigkeit + 1W10 gegen ihn würfeln. Wenn erfolgreich, kannst du ihn
+  festhalten.</p>
+<ul>
+  <li><strong>Würgen</strong>: Schaden ignoriert Panzerung. Nach 3 Runden ohne Befreiung wird das Ziel bewusstlos.
+  </li>
+  <li><strong>Wurf</strong>: Wirft Ziel oder Gegenstand. Schaden ignoriert Panzerung.</li>
+</ul>
+
+<h3 class="cyber-h">Deckung</h3>
+<p><strong>Du bist in Deckung, wenn du vollständig hinter etwas bist, das Geschosse aufhält.</strong> Es gibt keine
+  Teildeckung. Wenn die Deckung 0 TP erreicht, ist sie zerstört.</p>
+<p>Deckung hat eigene TP und wird wie ein Ziel behandelt. Überschüssiger Schaden geht verloren.</p>
+<h4 class="cyber-h">Menschliche Schilde</h4>
+<p>Wenn du jemanden gepackt hast, kannst du ihn als Schild ausrüsten. Er schützt dich vor Fernkampfangriffen, kann
+  sich aber nicht wehren oder ausweichen.</p>
+<p>Stirbt das Schild, hat es TP entsprechend seiner KRA. Ein toter Schild funktioniert wie ein normales Schild.</p>
+<h3 class="cyber-h">Panzerung</h3>
+<p>Panzerung hat einen Schutzwert (SW), der angibt, wie viel Schaden sie pro Treffer absorbiert. Rüstung kann Kopf
+  oder Körper schützen. Nur der höchste SW zählt.</p>
+<p>Panzerung reduziert Schaden. Wird der SW übertroffen, wird der Rest als Schaden weitergegeben.</p>
+<h1 class="cyber-h">Schaden durch Umwelt</h1>
+<ul>
+  <li><strong>Brennen</strong>: Direkt-Schaden pro Runde, ignoriert Panzerung. Muss mit Aktion gelöscht werden.</li>
+  <li><strong>Ertrinken / Ersticken</strong>: Direkt-Schaden basierend auf KRA. Ignoriert Panzerung.</li>
+  <li><strong>Stromschlag</strong>: Sofort 6W6 Schaden. Wiederholt sich jede Runde, bis du dich befreist.</li>
+  <li><strong>Stürzen</strong>: 2W6 Schaden pro 10 Meter, Panzerung zählt. Bei Fehlschlag: Beinbruch.</li>
+  <li><strong>Gifte &amp; Drogen</strong>: Angriff gegen Widerstand. Bei Fehlschlag wirkt das Mittel sofort.</li>
+</ul>

_includes/skill-overview.html

@@ -0,0 +1,46 @@
+<div id="skill-overview">
+
+</div>
+<script>
+  fetch("{{ '/assets/game-data/skills.json' | relative_url }}")
+    .then(response => response.json())
+    .then(skills => {
+      const skillDiv = document.getElementById('skill-overview');
+      for (const skillgroup of skills.Fertigkeiten) {
+        const groupSection = document.createElement('section');
+        const groupTitle = document.createElement('h2');
+        groupTitle.className = "cyber-h";
+        groupTitle.textContent = skillgroup.Gruppe;
+        groupSection.appendChild(groupTitle);
+        const skillTable = document.createElement('table');
+        skillTable.className = "cyber-table ac-red";
+        skillTable.setAttribute("style", "width: auto;");
+        const tableHeader = document.createElement('tr');
+        const headerName = document.createElement('th');
+        headerName.textContent = "Fertigkeit";
+        const headerType = document.createElement('th');
+        headerType.textContent = "Attribut";
+        const headerDescription = document.createElement('th');
+        headerDescription.textContent = "Beschreibung";
+        tableHeader.appendChild(headerName);
+        tableHeader.appendChild(headerType);
+        tableHeader.appendChild(headerDescription);
+        skillTable.appendChild(tableHeader);
+        for (const skill of skillgroup.Fertigkeiten) {
+          const skillRow = document.createElement('tr');
+          const skillName = document.createElement('td');
+          skillName.textContent = skill.Name;
+          const skillType = document.createElement('td');
+          skillType.textContent = skill.Attribut;
+          const skillDescription = document.createElement('td');
+          skillDescription.textContent = skill.Beschreibung;
+          skillRow.appendChild(skillName);
+          skillRow.appendChild(skillType);
+          skillRow.appendChild(skillDescription);
+          skillTable.appendChild(skillRow);
+        }
+        groupSection.appendChild(skillTable);
+        skillDiv.appendChild(groupSection);
+      }
+    });
+</script>

_layouts/character-sheet.html

@@ -0,0 +1,78 @@
+---
+layout: page
+---
+
+<div class="row">
+  {% if page.image %}
+  <div class="col s6 m4 l1 responsive-img">
+    <img class="responsive-img" src="{{ page.image | relative_url }}" alt="Picture of {{ page.title }}" />
+  </div>
+  {% endif %}
+  <div class="bg-dark fg-yellow cyber-tile col {% if page.image %}s12 m8 l11{% else %}s12 m12 l12{% endif %}">
+    <p class="character-details">
+      <strong class="cyberpunk-font-og character-details-title">Straßenname:</strong>
+      <span id="streetname" class="oxanium-font character-details-value"></span>
+    </p>
+    <p class="character-details">
+      <strong class="cyberpunk-font-og character-details-title">Alter:</strong>
+      <span id="age" class="oxanium-font character-details-value"></span>
+    </p>
+    <p class="character-details">
+      <strong class="cyberpunk-font-og character-details-title">Rolle:</strong>
+      <span id="role" class="oxanium-font character-details-value"></span>
+    </p>
+    <p class="character-details">
+      <strong class="cyberpunk-font-og character-details-title">Rollenfähigkeit:</strong>
+      <span id="role-ability" class="oxanium-font character-details-value"></span>
+    </p>
+    <p class="character-details">
+      <strong class="cyberpunk-font-og character-details-title">Unterkunft:</strong>
+      <span id="housing" class="oxanium-font character-details-value tooltipped" data-position="bottom" style="cursor: pointer;"></span>
+      <span style="background-color: white; color: blue; font-size: .64em; display: flex; align-items: flex-start; height: fit-content; align-self: flex-start; border-radius: 50%; padding: 0px 4px; ">i</span>
+    </p>
+    <p class="character-details">
+      <strong class="cyberpunk-font-og character-details-title">Lebensstil:</strong>
+      <span id="lifestyle" class="oxanium-font character-details-value tooltipped" data-position="bottom" style="cursor: pointer;"></span>
+      <span style="background-color: white; color: blue; font-size: .64em; display: flex; align-items: flex-start; height: fit-content; align-self: flex-start; border-radius: 50%; padding: 0px 4px; ">i</span>
+    </p>
+    <p class="character-details">
+      <strong class="cyberpunk-font-og character-details-title">Lebenskosten:</strong>
+      <span id="costs" class="oxanium-font character-details-value"></span>
+    </p>
+  </div>
+</div>
+{{ content }}
+
+<script>
+  let char, housing, lifestyle;
+  fetch("{{ page.datasource | relative_url }}")
+    .then(response => response.json())
+    .then(character => {
+      char = character;
+      return fetch("{{ '/assets/game-data/housings.json' | relative_url }}");
+    }).then(response => response.json())
+    .then(housings => {
+      housing = housings[char.housing.type];
+      return fetch("{{ '/assets/game-data/lifestyles.json' | relative_url }}");
+    }).then(response => response.json())
+    .then(lifestyles => {
+      lifestyle = lifestyles[char.lifestyle];
+      document.getElementById('streetname').innerText = char.handle;
+      document.getElementById('age').innerText = char.age;
+      const mainRole = char.roles.find(role => role.main);
+      document.getElementById('role').innerText = mainRole.name + " Rang: " + mainRole.rank;
+      document.getElementById('housing').innerText = char.housing.type;
+      if (housing.description)
+        document.getElementById('housing').setAttribute("data-tooltip", housing.description);
+      
+      document.getElementById('lifestyle').innerText = char.lifestyle;
+      if (housing.description)
+        document.getElementById('lifestyle').setAttribute("data-tooltip", lifestyle.description);
+
+      let costs = lifestyle.cost;
+      if (!char.housing.owned) {
+        costs += housing.rent;
+      }
+      document.getElementById('costs').innerText = costs + " ed";
+    });
+</script>

_layouts/default.html

@@ -5,9 +5,43 @@
 </head>
 <body>
   {% include header.html %}
-  <main>
+  <main class="container">
     {{ content }}
   </main>
   {% include footer.html %}
+  <script src="{{ "/assets/js/materialize.min.js" | relative_url }}"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const elems = document.querySelectorAll('.tooltipped');
+      const instances = M.Tooltip.init(elems, {});
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      var sidenavElems = document.querySelectorAll('.sidenav');
+      var sidenavInstances = M.Sidenav.init(sidenavElems, {});
+    });
+
+    document.querySelectorAll("button").forEach(button => {
+      const href = button.getAttribute("data-href");
+      if (!href) return;
+      button.addEventListener("click", () => {
+          window.location.href = button.getAttribute("data-href");
+      });
+    });
+  </script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register("{{ '/assets/js/service-worker.js' | relative_url }}")
+        .then((reg) => {
+          console.log("✅ Service Worker registriert");
+          if ('SyncManager' in window) {
+            reg.sync.register('cache-all-pages')
+              .then(() => console.log("✅ Alle Seiten werden gecached"))
+              .catch(err => console.error("❌ Fehler beim Sync:", err));
+          }
+        })
+        .catch(error => console.log("❌ Service Worker Fehler:", error));
+    }
+  </script>
 </body>
 </html>

_layouts/home.html

@@ -2,12 +2,20 @@
 layout: default
 ---
 
+{% if site.posts and site.posts.size > 0 %}
 {% for post in site.posts %}
   <article>
     <h1 class="cyber-h" style="margin-bottom: 0;"><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
     <p style="margin-top: 0;"><small>{{ post.date | date: "%d.%m.%Y" }}</small></p>
     <p>{{ post.excerpt }}</p>
-    <a href="{{ post.url | relative_url }}">Weiterlesen...</a>
+    <button class="cyber-button bg-red fg-white m-2 vt-bot" data-href="{{ post.url | relative_url }}">
+      Weiterlesen...
+      <span class="glitchtext">$_glitch;</span>
+      <span class="tag"></span>
+    </button>
   </article>
   <hr>
 {% endfor %}
+{% else %}
+  <div class="cyber-att-2" style="margin: 32px 0;">Es gibt noch keine Neuigkeiten...</div>
+{% endif %}

_layouts/toc.html

@@ -0,0 +1,66 @@
+---
+layout: page
+---
+
+<div id="toc"></div>
+
+{{ content }}
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const tocContainer = document.getElementById("toc");
+    if (!tocContainer) return;
+
+    const headings = Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+    if (headings.length === 0) return;
+
+    const tocList = document.createElement("ul");
+    tocList.className = "cyber-ul";
+    /*tocList.style.listStyle = "none";
+    tocList.style.paddingLeft = "0";
+    tocList.style.border = "1px solid #ccc";
+    tocList.style.borderRadius = "8px";
+    tocList.style.padding = "1em";
+    tocList.style.backgroundColor = "#f9f9f9";
+    tocList.style.fontFamily = "sans-serif";*/
+
+    const createId = (text) => {
+      return text.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-");
+    };
+
+    headings.forEach((heading) => {
+      const level = parseInt(heading.tagName.substring(1));
+      const text = heading.textContent;
+      let id = heading.id || createId(text);
+
+      // Wenn ID noch nicht vergeben, setzen
+      if (!heading.id) heading.id = id;
+
+      const li = document.createElement("li");
+      li.style.marginLeft = `${(level - 1) * 1.2}em`;
+      li.style.marginBottom = "0.3em";
+
+      const link = document.createElement("a");
+      link.className = "cyber-a";
+      link.href = `#${id}`;
+      link.textContent = text;
+      link.style.textDecoration = "none";
+      link.style.color = "#333";
+      link.style.fontSize = `${1.1 - level * 0.05}em`;
+
+      link.addEventListener("mouseover", () => (link.style.color = "#007acc"));
+      link.addEventListener("mouseout", () => (link.style.color = "#333"));
+
+      li.appendChild(link);
+      tocList.appendChild(li);
+    });
+
+    const heading = document.createElement("strong");
+    heading.textContent = "Inhaltsverzeichnis";
+    heading.style.display = "block";
+    heading.style.marginBottom = "0.5em";
+
+    tocContainer.appendChild(heading);
+    tocContainer.appendChild(tocList);
+  });
+</script>

_pages/about.md

@@ -1,7 +0,0 @@
----
-layout: page
-title: Charaktere
-permalink: /characters/
----
-
-TBD

_pages/attributes.md

@@ -0,0 +1,11 @@
+---
+layout: page
+title: Attribute
+permalink: /attributes/
+icon: fact_check
+weight: 5
+---
+
+Fertigkeiten sind Dinge, die dein Charakter kennt oder kann. Sie stehen für Wissen und Leistungen. Jede Fertigkeit ist mit einem Attribut verbunden, das ihre Ausführung beeinflusst.
+
+{% include attributes-overview.html %}

_pages/characters.md

@@ -0,0 +1,16 @@
+---
+layout: page
+title: Charaktere
+permalink: /characters/
+icon: account_circle
+weight: 3
+---
+
+<div class="row" style="column-gap: 5px;">
+  <div class="col s12 l6">
+    {% include character-profile.html id="chase" page="/characters/chase" image="/assets/img/Netrunner.png" bg_color="bg-red" fg_color="fg-dark" %}
+  </div>
+  <div class="col s12 l6">
+    {% include character-profile.html id="carver" page="/characters/crash" image="/assets/img/Tech.png" bg_color="bg-red" fg_color="fg-purple" %}
+  </div>
+</div>

_pages/chase.md

@@ -0,0 +1,8 @@
+---
+layout: character-sheet
+title: Chase Révolte
+permalink: /characters/chase
+image: /assets/img/Netrunner.png
+datasource: /assets/game-data/characters/chase.json
+nav: false
+---

_pages/crash.md

@@ -0,0 +1,8 @@
+---
+layout: character-sheet
+title: Carver Riggs
+permalink: /characters/crash
+image: /assets/img/Tech.png
+datasource: /assets/game-data/characters/carver.json
+nav: false
+---

_pages/lifepaths.md

@@ -2,8 +2,22 @@
 layout: page
 title: Lebensweg
 permalink: /lifepaths/
+icon: merge
+weight: 1
 ---
 
+- [Kulturelle Herkunft](#kulturelle-herkunft){:.cyber-a}
+- [Deine Persönlichkeit](#deine-persönlichkeit){:.cyber-a}
+- [Kleidung und persönlicher Stil](#kleidung-und-persönlicher-stil){:.cyber-a}
+- [Deine Motivation und Beziehungen](#deine-motivation-und-beziehungen){:.cyber-a}
+- [Was du am meisten schätzt](#was-du-am-meisten-schätzt){:.cyber-a}
+- [Deine Familiäre Herkunft](#deine-familiäre-herkunft){:.cyber-a}
+- [Dein Umfeld](#dein-umfeld){:.cyber-a}
+- [Deine Familienkrise](#deine-familienkrise){:.cyber-a}
+- [Deine Lebensziele](#deine-lebensziele){:.cyber-a}
+- [Deine Freunde, Deine Feinde, Deine tragische(n) Liebschaft(en), Süße Rache](#deine-freunde-deine-feinde-deine-tragischen-liebschaften-süße-rache){:.cyber-a}
+{:.cyber-ul}
+
 ## Kulturelle Herkunft
 {:.cyber-h}
 
@@ -80,25 +94,139 @@ permalink: /lifepaths/
 ## Deine Motivation und Beziehungen
 {:.cyber-h}
 
+<strong>Wirf 1W10 für jede Spalte oder wähle eine aus jeder Spalte.</strong>
+
+| Wurf | Was schätzt du am meisten? | Was hältst du von den meisten Leuten?                                          |
+| ---- | -------------------------- | ------------------------------------------------------------------------------ |
+| 1    | Geld                       | Ich bleibe neutral.                                                            |
+| 2    | Ehre                       | Ich bleibe neutral.                                                            |
+| 3    | Dein Wort                  | Ich mag so gut wie alle.                                                       |
+| 4    | Ehrlichkeit                | Ich hasse so gut wie alle.                                                     |
+| 5    | Wissen                     | Menschen sind Werkzeuge. Benutze sie und wirf sie dann weg.                    |
+| 6    | Rache                      | Jeder Mensch ist ein wertvolles Individuum.                                    |
+| 7    | Liebe                      | Menschen sind Hindernisse, die vernichtet werden müssen, wenn sie mich nerven. |
+| 8    | Macht                      | Man kann Menschen nicht vertrauen. Verlass dich auf niemanden.                 |
+| 9    | Familie                    | Lösch sie alle aus - sollen die Kakerlaken die Macht übernehmen.               |
+| 10   | Freundschaft               | Menschen sind wunderbar!                                                       |
+{:.cyber-table .ac-red style="width: auto;"}
+
 ### Was du am meisten schätzt
 {:.cyber-h}
 
+<strong>Wirf 1W10 oder wähle eine aus.</strong>
+
+| Wurf | Welche Menschen sind für dich am wertvollsten? |
+| ---- | ---------------------------------------------- |
+| 1    | Ein Elternteil                                 |
+| 2    | Ein Bruder oder eine Schwester                 |
+| 3    | Eine Liebschaft                                |
+| 4    | Ein Freund                                     |
+| 5    | Du selbst                                      |
+| 6    | Ein Haustier                                   |
+| 7    | Ein Lehrer oder Mentor                         |
+| 8    | Eine öffentliche Person                        |
+| 9    | Ein persönliches Held                          |
+| 10   | Niemand                                        |
+{:.cyber-table .ac-red style="width: auto;"}
+
+<strong>Wirf 1W10 oder wähle eine aus.</strong>
+
+| Wurf | Was ist dein wertvollster Besitz? |
+| ---- | --------------------------------- |
+| 1    | Eine Waffe                        |
+| 2    | Ein Werkzeug                      |
+| 3    | Ein Kleidungsstück                |
+| 4    | Eine Fotografie                   |
+| 5    | Ein Buch oder Tagebuch            |
+| 6    | Eine Aufnahme                     |
+| 7    | Ein Musikinstrument               |
+| 8    | Ein Schmuckstück                  |
+| 9    | Ein Spielzeug                     |
+| 10   | Ein Brief                         |
+{:.cyber-table .ac-red style="width: auto;"}
+
 ## Deine Familiäre Herkunft
 {:.cyber-h}
 
+<strong>Wirf 1W10 oder wähle eine aus.</strong>
+
+| Wurf | Ursprünfliche Herkunft | Beschreibung |
+| ---- | ---------------------- | ------------ |
+| 1    | Konzerngeschäftsführer | Wohlhabend und mächtig mit Dienern, Luxuswohnungen und alles vom Feinsten. Die private Sicherheit sorgt dafür, dass du immer geschützt warst. Du warst bestimmt auf einer Privatschule. |
+| 2    | Konzernmanager         | Gut betucht mit einer großen Behausung, sicherer Nachbarschaft, tollen Autos usw.<br> Manchmal stellten deine Eltern Bedienstete an, aber das war selten. Du wurdest privat wie auch von Konzernseite unterrichtet. |
+| 3    | Konzerntechniker       | Mittlere Mittelschicht mit gemütlicher Konwohnung oder Vororthaus in Beaverville, Minivan und Konzern-Technikum. Wie eine Mischung aus dem Leben im Amerika der 1950er Jahre und 1984. |
+| 4    | Nomadenrudel           | Du hattest eine Mischung aus stabilem Wohnwagen, Fahrzeugen und wuchtigen Straßenkombis als Zuhause. In jungen Jahren wurde dir Fahren und Kämpfen beigebracht, aber die Familie war immer da und passte auf dich auf. Essen war eigentlich immer frisch und reichlich. Meistens gab es Heimunterricht. |
+| 5    | Gang-"Familie"         | Ein brutales, gewalttätiges Zuhause an einem Ort, wo die Gang das Sagen hatte. Hunger, Kälte und Angst waren deine ständigen Begleiter. Du wusstes wahrscheinlich nicht, wer eigentlich deine Eltern waren. Bildung? Die Gang brachte dir bei, wie man kämpft, tötet und stiehlt - was brauchst du sonst noch? |
+| 6    | Kriegszonenbewohner    | Einen Hauch besser als das einer Gang-"Familie", ein verfallenes, schwer befestigtes Gebäude irgendwo in der Zone. Gelegentlich musstest du hungern, kamst aber halbwegs regelmäßig an ein Bett und an eine Mahlzeit ran. Heimunterricht. |
+| 7    | Städtische Obdachlose  | Du lebst in Autos, Müllcontainern oder vergessenen Frachtmodulen. Wenn du Glück hattest. Meistens littest du unter Hunger, Kälte und Angst, wenn du nicht hart genug warst, um dich um die Reste zu prügeln. Bildung? Die harte Schule des Lebens. |
+| 8    | Megabauten             | Du wuchst in einer der Megabauten auf, die nach dem Krieg hochgezogen wurden. Eine winzige Wohnung, Kibble und Scop als Nahrung, ein oftmals warmes Bett. Ein paar gebildetere Baubewohner oder ein lokaler Konzern könnten eine Schule eingerichtet haben. |
+| 9    | Reclaimer              | Du begannst auf der Straße, zogst dann aber in eine der verlassenen Geisterstädte um sie wiederaufzubauen. Das Leben eines Pioniers: gefährlich, aber mit reichlich einfachem Essen und einem sicheren Schlafplatz. Du wurdest daheim unterrichtet, wenn jemand die Zeit dafür fand. |
+| 10   | Edgerunner             | Je nachdem, welchen "Job" deine Eltern gerade hatten, veränderte sich dein Zuhause ständig. Mal ein Luxusappartment, mal eine städtische Konbude oder ein Müllcontainer, wenn ihr auf der Flucht wart. Kost und Logis schwankten zwischen Gourmet und Kibble. |
+{:.cyber-table .ac-red style="width: auto;"}
+
 ## Dein Umfeld
 {:.cyber-h}
 
+<strong>Wirf 1W10 oder wähle eine aus.</strong>
+
+| Wurf | Umfeld deiner Herkunft                                                                                                             |
+| ---- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| 1    | Auf der Straße rumgetrieben, ohne Aufsicht durch Erwachsene.                                                                       |
+| 2    | In einer Konzone verbracht, durch Mauern vom Rest der City getrennt.                                                               |
+| 3    | In einem Nomadenrudel, ständig auf Achse.                                                                                          |
+| 4    | In einem Nomadenrudel mit Wurzeln im Transport (Schiffe, Flugzeuge, Wohnwagen).                                                    |
+| 5    | In einem verfallenden, früher gehobenen Viertel, das zum Überleben jetzt die Booster zurückschlagen muss.                          |
+| 6    | Inmitten einer Kriegszone, Leben in einem zerstörten Gebäude oder in irgendeinem anderen Gemäuer.                                  |
+| 7    | In einem riesigen "Megabau", der von einem Konzern oder der City kontrolliert wird.                                                |
+| 8    | In den Ruinen einer verlassenen Stadt, die von Reclaimers übernommen wurde.                                                        |
+| 9    | In einer Schwimmenden Nation (einer treibenden, der Küste vorgelagerten Statd), die ein Treffpunkt für Menschen aller Couleur ist. |
+| 10   | In einem luxuriösen "Sternenkratzer" eines Konzerns, hoch über dem Rest des wimmelnden Pöbels.                                     |
+{:.cyber-table .ac-red style="width: auto;"}
+
 ## Deine Familienkrise
 {:.cyber-h}
 
-## Süße Rache
-{:.cyber-h}
+<strong>Wirf 1W10 oder wähle eine aus.</strong>
+
+| Wurf | Hintergrund                                                                                                                                                          |
+| ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1    | Deine Familie hat alles durch Verrat verloren.                                                                                                                       |
+| 2    | Deine Familie hat alles durch schlechtes Management verloren.                                                                                                        |
+| 3    | Deine Familie wurde verbannt oder auf anderem Wege aus ihrer Heimat / ihrer Nation / ihrem Konzern vertrieben.                                                       |
+| 4    | Deine Familie wurde gefangen genommen und nur du konntest entkommen.                                                                                                 |
+| 5    | Deine Familie ist verschwunden. Du bist als Einziger übriggeblieben.                                                                                                 |
+| 6    | Deine Familie wurde getötet und nur du hast überlebt.                                                                                                                |
+| 7    | Deine Familie ist in eine Langzeitverschwörung, eine Organisation oder Vereinigung verwickelt, beispielsweise eine Verbrecherfamilie oder eine revolutionäre Gruppe. |
+| 8    | Aufgrund eines Unglücks ist deine Familie in alle vier Himmelsrichtungen verstreut.                                                                                  |
+| 9    | Deine Familie trägt die Last einer Erbfehde, die schon Generationen anhält.                                                                                          |
+| 10   | Du bist Erbe der Familienschulden. Du musst die Schuld begleichen, bevor du dein Leben weiterführen kannst.                                                          |
+{:.cyber-table .ac-red style="width: auto;"}
 
 ## Deine Lebensziele
 {:.cyber-h}
 
-## Deine Freunde, Deine Feinde, Deine tragische(n) Liebschaft(en)
+<strong>Wirf 1W10 oder wähle eine aus.</strong>
+
+| Wurf | Lebensziele                                                                                      |
+| ---- | ------------------------------------------------------------------------------------------------ |
+| 1    | Einen schlechten Ruf loswerden.                                                                  |
+| 2    | Macht und Kontroller erlangen.                                                                   |
+| 3    | Von der Straße wegkommen, was auch immer es kosten mag.                                          |
+| 4    | All jenen Schmerz und Leid zufügen, die dir in die Quere kommen.                                 |
+| 5    | Dein altes Leben hinter dir lassen und versuchen, es zu vergessen.                               |
+| 6    | Die für dein mieses Leben Verantwortlichen jagen und sie dafür büßen lassen.                     |
+| 7    | Bekommen, was dir rechtmäßig zusteht.                                                            |
+| 8    | Wenn möglich, jemanden aus deinem Hintergrund retten, wie eine Liebschaft oder Familienmitglied. |
+| 9    | Ruhm und Anerkennung gewinnen.                                                                   |
+| 10   | Gefürchtet und respektiert werden.                                                               |
+{:.cyber-table .ac-red style="width: auto;"}
+
+## Deine Freunde, Deine Feinde, Deine tragische(n) Liebschaft(en), Süße Rache
 {:.cyber-h}
 
 Diese Dinge werden per Zufall ausgewürfelt und müssen Vorort geklärt werden.
+
+## Rollenbasierte Lebenswege
+{:.cyber-h}
+
+Rollenbasierte Lebenswege werden wie Freunde, Feinde und Liebschaften auch vor Ort bestimmt.

_pages/netrunner-guide.md

@@ -0,0 +1,158 @@
+---
+layout: toc
+title: Netrunner Guide
+permalink: /player-guides/netrunner
+nav: false
+---
+
+{% include player-guide.html %}
+
+## Netrunner (Rollenfähigkeit: `Interface`)
+{:.cyber-h}
+
+Die Rollenfähigkeit `Interface` erlaubt es Netrunnern, sogenannte **NET-Läufe** durchzuführen. Je höher der `Interface`-Rang, desto mehr **NET-Aktionen pro Zug** sind möglich und desto mehr **Interface-Programme (Apps)** stehen zur Verfügung.
+
+### NET-Aktionen pro Zug
+{:.cyber-h}
+
+| Interface-Rang | NET-Aktionen |
+|----------------|--------------|
+| 1–3            | 2            |
+| 4–6            | 3            |
+| 7–9            | 4            |
+| 10             | 5            |
+{:.cyber-table .ac-red style="width: auto;"}
+
+### Interface-Apps
+{:.cyber-h}
+
+| Fähigkeit     | Beschreibung |
+|---------------|--------------|
+| **Hintertür** | Durchbrechen von Passwörtern und Hindernissen in Architekturen. |
+| **Deckmantel** | Aktionen im Netz verbergen, bevor das Netz sie registriert. |
+| **Kontrolle** | Kontrolle über vernetzte Geräte in der Architektur. |
+| **Auswertung** | Zugriff auf Peripheriedaten aus Architekturen. |
+| **Kundschafter** | „Karte“ der Architektur aufdecken. |
+| **Scanner** | Nach Geräten oder Zugangspunkten suchen. |
+| **Abfangen** | Eingehende Kommunikation oder Datenpakete abfangen. |
+| **Virus** | Einen Virus in der Architektur platzieren. |
+| **Schocker** | Einfacher Netrunner-Angriff auf Programme oder andere Netrunner. |
+{:.cyber-table .ac-red style="width: auto;"}
+
+## Netrun durchführen
+{:.cyber-h}
+
+## Voraussetzungen
+{:.cyber-h}
+
+Um als Netrunner effektiv arbeiten zu können, brauchst du:
+
+- **Virtuellen Zugang** (z. B. über Virtuality-Brille)
+- **Cyberdeck** mit geladenen Programmen
+- Die Rollenfähigkeit **Interface**
+{:.cyber-ul}
+
+---
+
+## NET-Aktionen pro Zug
+{:.cyber-h}
+
+Je nach Rang in deiner Rollenfähigkeit `Interface` hast du folgende Anzahl an **NET-Aktionen pro Runde**:
+
+| Interface-Rang | NET-Aktionen |
+|----------------|--------------|
+| 1–3            | 2            |
+| 4–6            | 3            |
+| 7–9            | 4            |
+| 10             | 5            |
+{:.cyber-table .ac-red style="width: auto;"}
+
+> Du darfst pro Zug **entweder** eine Fleischaktion **oder** so viele NET-Aktionen durchführen, wie dir zustehen. Zusätzlich steht dir immer **eine Bewegungsaktion** zur Verfügung.
+
+---
+
+## Liste der NET-Aktionen
+{:.cyber-h}
+
+### Allgemeine NET-Aktionen
+{:.cyber-h}
+
+- **Ein-/Ausklinken**: Zugangspunkt betreten oder verlassen (max. 6 m Entfernung).
+- **Interface-App einsetzen**: Eine App aus deinem Cyberdeck aktivieren.
+- **Programm aktivieren/deaktivieren**: Aktiviert oder deaktiviert eines deiner Programme.
+- **Sonstiges**: Z. B. Virus platzieren, Zugriff manipulieren.
+{:.cyber-ul}
+
+### Was ist keine NET-Aktion?
+{:.cyber-h}
+
+- **Dateikopie speichern**: Eine gefundene Datei auf deinem Cyberdeck speichern.
+- **Bewegen in einer NET-Architektur**: In deinem Zug kannst du dich in einer NET-Architektur frei bewegen. An einem NET-Hindernis, das dich aufhält (wie zum Beispiel ein Passwort) kommst du nicht vorbei.
+{:.cyber-ul}
+
+---
+
+## Interface-Apps (mit NET-Aktion einsetzbar)
+{:.cyber-h}
+
+Diese Apps (außer Schocker) benötigen:
+
+**Interface + 1W10 gegen SG**
+
+### Übersicht
+{:.cyber-h}
+
+| App            | Funktion |
+|----------------|----------|
+| **Scanner**     | Findet Zugangspunkte in der Umgebung. Wird als Fleischaktion eingesetzt. |
+| **Hintertür**   | Öffnet gesicherte Zugänge mit Passwörtern oder Sperren. |
+| **Deckmantel**  | Versteckt deine Aktionen und schützt vor Erkennung. |
+| **Kontrolle**   | Übernimmt Geräte, die über Kontrollknoten verbunden sind. |
+| **Auswertung**  | Erkennt und analysiert Daten oder Dateien. |
+| **Kundschafter**| Deckt Teile der NET-Architektur („Karte“) auf. |
+| **Virus**       | Lässt einen Virus zurück, der Systeme beeinflusst. (SG vom SL abhängig) |
+| **Abgang**      | Verlässt ein Stockwerk der NET-Architektur bei Kampf gegen Schwarzes ICE. |
+| **Schocker**    | Führt einen Angriff auf Programme oder andere Netrunner aus. (s. Kampf im NET) |
+
+---
+
+## Kampf im NET
+{:.cyber-h}
+
+Wenn es zu Gewalt im Cyberspace kommt, läuft es wie folgt ab:
+
+**Angreifer (z. B. Netrunner):**  
+`Interface + Programm-ANG + 1W10`
+
+**Verteidiger (Ziel oder Schwarzes ICE):**  
+`Interface + 1W10` oder `Programm-VER + 1W10`
+
+> Trifft der Angriff, wirkt der Effekt des Programms. Programme können zerstört werden, wenn ihre **Integrität (TP)** auf 0 fällt.
+
+---
+
+## Programme
+{:.cyber-h}
+
+Programme sind deine Werkzeuge im Cyberspace. Du kannst sie **aktivieren oder deaktivieren** (je 1 NET-Aktion).
+
+- **Ein Programm kann nur einmal pro Fleischraum-Runde aktiviert werden.**
+- Du kannst mehrere Kopien desselben Programms aktiv haben.
+- **Angriffsprogramme** deaktivieren sich nach dem Einsatz automatisch.
+{:.cyber-ul}
+
+> Das **Installieren oder Deinstallieren eines Programms dauert eine Stunde.**
+
+---
+
+## Tipps für effektives Netrunning
+{:.cyber-h}
+
+- **Vorbereitung ist alles**: Lade deine Programme rechtzeitig.
+- **Bleib in Deckung**: Im Fleischraum bist du während NET-Aktionen verwundbar.
+- **Scannen zuerst**: Bevor du dich einklinkst, finde die Zugangspunkte mit dem Scanner.
+- **ICE sind gefährlich**: Plane deinen Abgang und halte Ausweichrouten offen.
+- **Steuer deine Umgebung**: Mit Kontroll-Apps kannst du Kameras, Türen und Fallen übernehmen.
+{:.cyber-ul}
+
+---

_pages/player-guides.md

@@ -0,0 +1,11 @@
+---
+layout: page
+title: Player Guides
+permalink: /player-guides
+icon: assist_walker
+nav: true
+---
+
+- [Netrunner Guide]({{ "/player-guides/netrunner" | relative_url }}){:.cyber-a}
+- [Tech Guide]({{ "/player-guides/tech" | relative_url }}){:.cyber-a}
+{:.cyber-ul}

_pages/roles.md

@@ -2,6 +2,8 @@
 layout: page
 title: Rollen
 permalink: /roles/
+icon: manage_accounts
+weight: 4
 ---
 
 TBD

_pages/skills.md

@@ -0,0 +1,11 @@
+---
+layout: page
+title: Fertigkeiten
+permalink: /skills/
+icon: fact_check
+weight: 6
+---
+
+Fertigkeiten sind Dinge, die dein Charakter kennt oder kann. Sie stehen für Wissen und Leistungen. Jede Fertigkeit ist mit einem Attribut verbunden, das ihre Ausführung beeinflusst.
+
+{% include skill-overview.html %}

_pages/tech-guide.md

@@ -0,0 +1,98 @@
+---
+layout: toc
+title: Tech Guide
+permalink: /player-guides/tech
+nav: false
+---
+
+{% include player-guide.html %}
+
+## Tech (Rollenfähigkeit: `Bastler`)
+{:.cyber-h}
+
+Techs nutzen die Rollenfähigkeit `Bastler`, um Geräte zu **reparieren**, **verbessern**, **erfinden** und **bauen**.
+
+Jedes Mal, wenn ein Tech seinen `Bastler`-Rang erhöht, erhält er **1 Rang in zwei Bastler-Spezialisierungen** seiner Wahl:
+
+- **Feldkompetenz**
+- **Aufrüstungskompetenz**
+- **Herstellungskompetenz**
+- **Erfindungskompetenz**
+
+---
+
+### Bastler-Spezialisierungen
+{:.cyber-h}
+
+#### **Feldkompetenz**
+{:.cyber-h}
+
+> Spezialisiert auf schnelle Notfallreparaturen in stressigen Situationen.
+
+- Addiere deinen Rang in Feldkompetenz auf alle Proben mit:
+  - Basistechnik
+  - Cybertech
+  - Elektronik/Sicherheitstechnik
+  - Waffentechnik
+  - Boden-, Wasser- oder Luftfahrzeugtechnik
+- Bei mindestens 1 Rang darfst du innerhalb von 10 Minuten behelfsmäßig reparieren.
+
+---
+
+#### **Aufrüstungskompetenz**
+{:.cyber-h}
+
+> Verbessere bestehende Gegenstände auf vielfältige Weise.
+
+- Beispiele für Aufrüstungen:
+  - Reduziere Menschlichkeitsverlust bei Cyberware
+  - Erhöhe Slots für Optionen oder Programme
+  - Verbessere Qualität oder Schaden
+  - Füge neue Funktionen hinzu (z. B. versteckbare Waffen)
+
+**Probe:**  
+`TECH + zugehörige Reparatur-Fertigkeit + Spezialisierung + 1W10`
+
+---
+
+#### **Herstellungskompetenz**
+{:.cyber-h}
+
+> Stelle Gegenstände aus Materialien und Ideen her.
+
+- Kaufe Materialien und kombiniere sie mit Tech-Wissen.
+- Preisstufe legt SG & Zeit fest (siehe Tabelle unten).
+- Misslingt der Wurf: Materialverlust.
+
+**Probe:**  
+`TECH + Reparatur-Fertigkeit des Gegenstands + Spezialisierung + 1W10`
+
+---
+
+#### **Erfindungskompetenz**
+{:.cyber-h}
+
+> Erfinde völlig neue Gegenstände oder Aufrüstungen.
+
+- Du beschreibst die Funktion möglichst genau.
+- SL legt Preisstufe und SG fest.
+- Gilt wie Herstellung, nur mit mehr Kreativität.
+
+**Probe:**  
+`TECH + Reparatur-Fertigkeit der Erfindung oder des aufgerüsteten Objekts + Spezialisierung + 1W10`
+
+---
+
+### SG-Tabelle für Aufrüsten, Herstellen & Erfinden
+{:.cyber-h}
+
+| Preisstufe         | SG | Zeit           |
+|--------------------|----|----------------|
+| Billig/Alltäglich  | 9  | 1 Stunde       |
+| Teuer              | 13 | 6 Stunden      |
+| Premium            | 17 | 1 Tag          |
+| Kostspielig        | 21 | 1 Woche        |
+| Sehr Kostspielig   | 24 | 2 Wochen       |
+| Luxus              | 29 | 1 Monat        |
+| Superluxus         | 29 | 1 Monat / 10.000 Euro im Preis |
+{:.cyber-table .ac-red style="width: auto;"}

_posts/2025-03-16-welcome-to-jekyll.markdown

@@ -1,29 +0,0 @@
----
-layout: post
-title:  "Welcome to Jekyll!"
-date:   2025-03-16 20:11:55 +0100
-categories: jekyll update
----
-You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
-
-Jekyll requires blog post files to be named according to the following format:
-
-`YEAR-MONTH-DAY-title.MARKUP`
-
-Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.
-
-Jekyll also offers powerful support for code snippets:
-
-{% highlight ruby %}
-def print_hi(name)
-  puts "Hi, #{name}"
-end
-print_hi('Tom')
-#=> prints 'Hi, Tom' to STDOUT.
-{% endhighlight %}
-
-Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
-
-[jekyll-docs]: https://jekyllrb.com/docs/home
-[jekyll-gh]:   https://github.com/jekyll/jekyll
-[jekyll-talk]: https://talk.jekyllrb.com/

_sass/_layout.scss

@@ -1,12 +1,74 @@
+* {
+  font-family: BlenderProBook, sans-serif;
+}
+
+strong {
+  font-weight: 600;
+}
+
 body {
+  height: 100vh;
+  min-height: 100vh;
   max-height: 100vh;
+  display: flex;
+  flex-direction: column;
   overflow-y: scroll;
+  font-family: BlenderProBook, sans-serif;
 }
 
 main {
-  height: calc(100vh - 124px);
-  overflow-y: scroll;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-grow: 1;
+  font-family: BlenderProBook, sans-serif;
+}
+
+footer {
+  position: sticky !important;
+  bottom: 0;
+  width: 100%;
+  background: var(--dark, #333);
+  color: var(--white, #fff);
+  text-align: center;
+  padding: 10px;
+  z-index: 1000;
+}
+
+.breadcrumb {
+  font-size: 14px;
+  color: #ffcc00;
+  padding: 5px 10px;
+}
+
+.breadcrumb a {
+  color: #ff003c;
+  text-decoration: none;
+}
+
+.breadcrumb span {
+  color: #888;
+}
+
+.character-details {
+  display: flex;
+}
+
+.character-details-title {}
+
+.character-details-value {
+  margin: 0px 0px 0px auto;
+}
+
+.mobile-tabs {
+  display: none;
+}
+
+/* Ab max. 992px (iPad Hochkant und kleiner) ändert sich das Layout */
+@media screen and (max-width: 992px) {
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-tabs {
+    display: block;
+    background-color: transparent;
+  }
 }

assets/game-data/characters/carver.json

@@ -0,0 +1,54 @@
+{
+  "name": "Carver Riggs",
+  "handle": "Crash",
+  "age": 22,
+  "roles": [
+    {
+      "name": "Tech",
+      "rank": 4,
+      "main": true,
+      "skills": []
+    }
+  ],
+  "attributes": {
+    "int": 7,
+    "ref": 8,
+    "dex": 7,
+    "tech": 7,
+    "cool": 5,
+    "will": 4,
+    "luck": 7,
+    "move": 5,
+    "body": 7,
+    "emp": 5,
+    "humanity": 58
+  },
+  "skills": [
+    { "name": "", "rank": 5 },
+    { "name": "", "rank": 3 },
+    { "name": "", "rank": 4 },
+    { "name": "", "rank": 4 },
+    { "name": "", "rank": 4 },
+    { "name": "", "rank": 6 },
+    { "name": "", "rank": 3 },
+    { "name": "Sprache: Streetslang", "rank": 2 },
+    { "name": "Sprache: Muttersprache", "rank": 4 },
+    { "name": "Ortskunde: zu Hause", "rank": 4 },
+    { "name": "", "rank": 3 },
+    { "name": "", "rank": 4 },
+    { "name": "", "rank": 4 },
+    { "name": "", "rank": 4 },
+    { "name": "", "rank": 4 },
+    { "name": "", "rank": 3 },
+    { "name": "", "rank": 5 },
+    { "name": "", "rank": 6 },
+    { "name": "", "rank": 5 },
+    { "name": "", "rank": 4 }
+  ],
+  "housing": {
+    "type": "Frachtcontainer",
+    "location": "Night City",
+    "owned": false
+  },
+  "lifestyle": "Kibble"
+}

assets/game-data/characters/chase.json

@@ -0,0 +1,53 @@
+{
+  "name": "Chase Révolte",
+  "handle": null,
+  "age": 23,
+  "roles": [
+    {
+      "name": "Netrunner",
+      "rank": 4,
+      "main": true
+    }
+  ],
+  "attributes": {
+    "int": 6,
+    "ref": 8,
+    "dex": 8,
+    "tech": 5,
+    "cool": 7,
+    "will": 4,
+    "luck": 8,
+    "move": 5,
+    "body": 7,
+    "emp": 4,
+    "humanity": 46
+  },
+  "skills": [
+    { "name": "Concentration", "rank": 5 },
+    { "name": "Conceal/Reveal Object", "rank": 3 },
+    { "name": "Perception", "rank": 4 },
+    { "name": "Athletics", "rank": 4 },
+    { "name": "Stealth", "rank": 4 },
+    { "name": "Cryptography", "rank": 6 },
+    { "name": "Education", "rank": 3 },
+    { "name": "Sprache: Streetslang", "rank": 2 },
+    { "name": "Sprache: Muttersprache", "rank": 4 },
+    { "name": "Ortskunde: zu Hause", "rank": 2 },
+    { "name": "Brawling", "rank": 3 },
+    { "name": "Evasion", "rank": 4 },
+    { "name": "Handgun", "rank": 4 },
+    { "name": "Conversation", "rank": 4 },
+    { "name": "Human Perception", "rank": 4 },
+    { "name": "Persuasion", "rank": 3 },
+    { "name": "Basic Tech", "rank": 5 },
+    { "name": "Cybertech", "rank": 6 },
+    { "name": "Electronics/Security Tech", "rank": 5 },
+    { "name": "First Aid", "rank": 4 }
+  ],
+  "housing": {
+    "type": "Frachtcontainer",
+    "location": "Night City",
+    "owned": false
+  },
+  "lifestyle": "Kibble"
+}

assets/game-data/housings.json

@@ -0,0 +1,47 @@
+{
+  "Leben auf der Straße":{
+    "rent": 0,
+    "price": 0
+  },
+  "Leben auf der Straße in einem Fahrzeug": {
+    "rent": 0,
+    "price": 0
+  },
+  "Kastenhotel": {
+    "rent": 500,
+    "price": 0
+  },
+  "Frachtcontainer": {
+    "rent": 1000,
+    "price": 15000,
+    "description": "Frachtcontainer stehen in den Randbezirken, in der Rückgewonnenen Stadtgrenze und in der Kriegszone. Du hast genügend Platz, um deine Sachen unterzubringen, ein Bett, auf dem du bequem schlafen kannst, einen Schreibtisch, Strom, einen Kühlschrank, eine Mikrowelle und ein Waschbecken, geschützt durch die Sicherheit eines starken Schlosses. In der Kriegszone bist du schon in Gefahre, wenn du nach draußen trittst, aber wenn du in den Randbezirken lebst, bist du deutlich sicherer. Toiletten, Duschen und Waschmaschine gibt es in den Einrichtungen, die du mit den anderen Bewohnern der anderen Frachtcontainer teilst, die neben deinem Container gestapelt sind. Wenn du ein Fahrzeug besitzt und hier wohnst, parkst du wahrscheinlich auf der Straße. Wenn du in einer Kriegszone lebst, wird es gelegentlich aufgebrochen. Wenn du dich für die Randbezirke entscheidest, ist es einigermaßen sicher."
+  },
+  "Atelierwohung": {
+    "rent": 1500,
+    "price": 25000
+  },
+  "Dreizimmerwohnung": {
+    "rent": 2500,
+    "price": 35000
+  },
+  "Konzernwohnung": {
+    "rent": "bereitgestellt",
+    "price": 0
+  },
+  "Hochwertige Wohnung": {
+    "rent": 7500,
+    "price": 85000
+  },
+  "Luxus-Penthouse": {
+    "rent": 15000,
+    "price": 150000
+  },
+  "Konzern-Beaverville-Haus": {
+    "rent": "bereitgestellt",
+    "price": 200000
+  },
+  "Konzern-Beaverville-McMansion": {
+    "rent": "bereitgestellt",
+    "price": 500000
+  }
+}

assets/game-data/lifestyles.json

@@ -0,0 +1,18 @@
+{
+  "Kibble": {
+    "cost": 100,
+    "description": "Du isst furchtbares Essen, das du nicht einmal für einen Hund kaufen würdest, den du magst. Einmal im Monat kannst du dir einen Film oder einen Braindance ansehen."
+  },
+  "Generisches Fertigfutter": {
+    "cost": 300,
+    "description": "Du isst Essen, dass vergleichsweise besser schmeckt als Kibble. Du kannst es dir leisten jedes Wochenende in eine gute Bar zu gehen und dort zu feiern oder dich für gutes Essen in ein Restaurant setzen."
+  },
+  "Gutes Fertigfutter": {
+    "cost": 600,
+    "description": "Dein Essen hat die gleiche Qualität wie die meisten Restaurants, und obwohl es zwar künstlich ist, schmeckt es doch fast wie echtes Essen. Du besuchst hervorragende Bars und Restaurants, wenn du ausgehst. Einmal im Monat kannst du dir ein Live-Konzert oder ein Sportereignis ansehen."
+  },
+  "Frischfutter": {
+    "cost": 1500,
+    "description": "Du isst richtiges Essen. Einmal im Monat, wenn du müde und fern der Heimat bist, kannst du in ein nahegelegenes Hotel gehen und musst dir keine Sorgen ums Budget machen. Du besuchst eine VIP-Bar. Einmal im Monat kannst du in einem Weltklasse-Restaurant essen gehen."
+  }
+}

assets/game-data/skills.json

@@ -0,0 +1,374 @@
+{
+  "Fertigkeiten": [
+    {
+      "Gruppe": "Aufmerksamkeitsgruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Konzentration",
+          "Attribut": "WIL",
+          "Beschreibung": "Fokus, Gedächtnis, Kontrolle von Ablenkung, geistige Kontrolle."
+        },
+        {
+          "Name": "Lippenlesen",
+          "Attribut": "INT",
+          "Beschreibung": "Von den Lippen lesen und Sprache erkennen."
+        },
+        {
+          "Name": "Objekte verbergen/entdecken",
+          "Attribut": "INT",
+          "Beschreibung": "Objekte verstecken oder finden (z. B. Waffen, Kleidung)."
+        },
+        {
+          "Name": "Spurensuche",
+          "Attribut": "INT",
+          "Beschreibung": "Spuren verfolgen anhand von Abdrücken, Hinweisen."
+        },
+        {
+          "Name": "Wahrnehmung",
+          "Attribut": "INT",
+          "Beschreibung": "Versteckte Hinweise erkennen, Personen oder Fallen entdecken."
+        }
+      ]
+    },
+    {
+      "Gruppe": "Körperbeherrschungsgruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Athletik",
+          "Attribut": "GES",
+          "Beschreibung": "Springen, Klettern, Schwimmen, Werfen etc."
+        },
+        {
+          "Name": "Ausdauer",
+          "Attribut": "WIL",
+          "Beschreibung": "Umweltbedingungen und Entbehrungen ertragen."
+        },
+        {
+          "Name": "Folter/Drogen widerstehen",
+          "Attribut": "WIL",
+          "Beschreibung": "Schmerzen, Drogen, Folter standhalten."
+        },
+        {
+          "Name": "Heimlichkeit",
+          "Attribut": "GES",
+          "Beschreibung": "Sich unbemerkt bewegen oder verstecken."
+        },
+        {
+          "Name": "Kontorsionistik",
+          "Attribut": "GES",
+          "Beschreibung": "Körper manipulieren, Fesseln entkommen, enge Räume."
+        }
+      ]
+    },
+    {
+      "Gruppe": "Steuergruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Bodenfahrzeug lenken",
+          "Attribut": "REF",
+          "Beschreibung": "Bodenfahrzeuge steuern."
+        },
+        {
+          "Name": "Luftfahrzeug lenken",
+          "Attribut": "REF",
+          "Beschreibung": "Luftfahrzeuge steuern."
+        },
+        {
+          "Name": "Reiten",
+          "Attribut": "REF",
+          "Beschreibung": "Reittiere steuern."
+        },
+        {
+          "Name": "Wasserfahrzeug lenken",
+          "Attribut": "REF",
+          "Beschreibung": "Wasserfahrzeuge steuern."
+        }
+      ]
+    },
+    {
+      "Gruppe": "Bildungsgruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Allgemeinwissen",
+          "Attribut": "INT",
+          "Beschreibung": "Allgemeine Bildung, Lesen, Schreiben, Rechnen."
+        },
+        {
+          "Name": "Betriebswirtschaft",
+          "Attribut": "INT",
+          "Beschreibung": "Geschäftssinn, Werbung, Auftragswesen."
+        },
+        {
+          "Name": "Buchführung",
+          "Attribut": "INT",
+          "Beschreibung": "Zahlen, Budgets, Tagesgeschäft."
+        },
+        {
+          "Name": "Bürokratie",
+          "Attribut": "INT",
+          "Beschreibung": "Behördenarbeit, Informationsbeschaffung."
+        },
+        {
+          "Name": "Datensuche",
+          "Attribut": "INT",
+          "Beschreibung": "Nutzung von Datenbanken und Quellen."
+        },
+        {
+          "Name": "Glücksspiel",
+          "Attribut": "INT",
+          "Beschreibung": "Wahrscheinlichkeit berechnen, Glücksspiel."
+        },
+        {
+          "Name": "Kriminologie",
+          "Attribut": "INT",
+          "Beschreibung": "Beweise analysieren, Polizeiakten."
+        },
+        {
+          "Name": "Kryptografie",
+          "Attribut": "INT",
+          "Beschreibung": "Verschlüsselung und Entschlüsselung."
+        },
+        {
+          "Name": "Naturwissenschaft",
+          "Attribut": "INT",
+          "Beschreibung": "Wissenschaftliche Fachkenntnisse."
+        },
+        {
+          "Name": "Ortskunde",
+          "Attribut": "INT",
+          "Beschreibung": "Stadtkenntnisse und Gruppierungen."
+        },
+        {
+          "Name": "Schlussfolgern",
+          "Attribut": "INT",
+          "Beschreibung": "Logische und intuitive Schlussfolgerungen."
+        },
+        {
+          "Name": "Sprache",
+          "Attribut": "INT",
+          "Beschreibung": "Fremdsprache sprechen."
+        },
+        {
+          "Name": "Taktik",
+          "Attribut": "INT",
+          "Beschreibung": "Militärische Strategie und Planung."
+        },
+        {
+          "Name": "Umgang mit Tieren",
+          "Attribut": "INT",
+          "Beschreibung": "Tiere pflegen, dressieren."
+        },
+        {
+          "Name": "Verfassen",
+          "Attribut": "INT",
+          "Beschreibung": "Texte wie Artikel, Lieder schreiben."
+        },
+        {
+          "Name": "Wildnisleben",
+          "Attribut": "INT",
+          "Beschreibung": "Überleben in der Wildnis."
+        }
+      ]
+    },
+    {
+      "Gruppe": "Nahkampfgruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Ausweichen",
+          "Attribut": "GES",
+          "Beschreibung": "Angriffen ausweichen, auch im Fernkampf bei REF ≥ 8."
+        },
+        {
+          "Name": "Faustkampf",
+          "Attribut": "GES",
+          "Beschreibung": "Unbewaffneter Nahkampf."
+        },
+        {
+          "Name": "Kampfkunst",
+          "Attribut": "GES",
+          "Beschreibung": "Kampfstile wie Karate, Judo usw. (x2)."
+        },
+        {
+          "Name": "Nahkampfwaffen",
+          "Attribut": "GES",
+          "Beschreibung": "Waffen im Nahkampf nutzen."
+        }
+      ]
+    },
+    {
+      "Gruppe": "Darbietungsgruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Musikinstrument",
+          "Attribut": "TECH",
+          "Beschreibung": "Instrument spielen."
+        },
+        {
+          "Name": "Schauspiel",
+          "Attribut": "COOL",
+          "Beschreibung": "Rollen übernehmen und Gefühle darstellen."
+        }
+      ]
+    },
+    {
+      "Gruppe": "Fernkampfgruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Automatisches Feuer",
+          "Attribut": "REF",
+          "Beschreibung": "Automatische Feuerwaffen kontrollieren (x2)."
+        },
+        {
+          "Name": "Bogenschießen",
+          "Attribut": "REF",
+          "Beschreibung": "Pfeile und Bolzen schießen."
+        },
+        {
+          "Name": "Handfeuerwaffen",
+          "Attribut": "REF",
+          "Beschreibung": "Pistolen und Revolver verwenden."
+        },
+        {
+          "Name": "Langwaffen",
+          "Attribut": "REF",
+          "Beschreibung": "Gewehre und Schrotflinten verwenden."
+        },
+        {
+          "Name": "Schwere Waffen",
+          "Attribut": "REF",
+          "Beschreibung": "Große Projektile, Granaten usw. (x2)."
+        }
+      ]
+    },
+    {
+      "Gruppe": "Gesellschaftsgruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Bestechung",
+          "Attribut": "COOL",
+          "Beschreibung": "Bestechung planen und ausführen."
+        },
+        {
+          "Name": "Garderobe",
+          "Attribut": "COOL",
+          "Beschreibung": "Wissen, was wann getragen wird."
+        },
+        {
+          "Name": "Gassenwissen",
+          "Attribut": "COOL",
+          "Beschreibung": "Kriminelle Netzwerke, Schwarzmärkte."
+        },
+        {
+          "Name": "Handel",
+          "Attribut": "COOL",
+          "Beschreibung": "Verkauf und Einkauf verhandeln."
+        },
+        {
+          "Name": "Konversation",
+          "Attribut": "EMP",
+          "Beschreibung": "Gespräche führen, Smalltalk."
+        },
+        {
+          "Name": "Körperpflege",
+          "Attribut": "COOL",
+          "Beschreibung": "Pflege, Hygiene, Ausstrahlung."
+        },
+        {
+          "Name": "Menschenkenntnis",
+          "Attribut": "EMP",
+          "Beschreibung": "Gefühle und Lügen erkennen."
+        },
+        {
+          "Name": "Überreden",
+          "Attribut": "COOL",
+          "Beschreibung": "Argumentieren, überzeugen."
+        },
+        {
+          "Name": "Verhören",
+          "Attribut": "COOL",
+          "Beschreibung": "Informationen durch Zwang gewinnen."
+        }
+      ]
+    },
+    {
+      "Gruppe": "Handwerksgruppe",
+      "Fertigkeiten": [
+        {
+          "Name": "Basistechnik",
+          "Attribut": "TECH",
+          "Beschreibung": "Einfache Geräte reparieren."
+        },
+        {
+          "Name": "Bodenfahrzeugtechnik",
+          "Attribut": "TECH",
+          "Beschreibung": "Bodenfahrzeuge warten."
+        },
+        {
+          "Name": "Cybertech",
+          "Attribut": "TECH",
+          "Beschreibung": "Cyberware analysieren und reparieren."
+        },
+        {
+          "Name": "Elektronik/Sicherheitstechnik",
+          "Attribut": "TECH",
+          "Beschreibung": "Elektronik installieren, Bugs und Sicherheit umgehen (x2)."
+        },
+        {
+          "Name": "Erste Hilfe",
+          "Attribut": "TECH",
+          "Beschreibung": "Wunden versorgen."
+        },
+        {
+          "Name": "Fälschen",
+          "Attribut": "TECH",
+          "Beschreibung": "Dokumente fälschen."
+        },
+        {
+          "Name": "Fotografieren/Filmen",
+          "Attribut": "TECH",
+          "Beschreibung": "Bilder und Videos erstellen."
+        },
+        {
+          "Name": "Künstlerische Gestaltung",
+          "Attribut": "TECH",
+          "Beschreibung": "Gemälde, Skulpturen, Kunstwerke."
+        },
+        {
+          "Name": "Luftfahrzeugtechnik",
+          "Attribut": "TECH",
+          "Beschreibung": "Luftfahrzeuge warten."
+        },
+        {
+          "Name": "Notfallmedizin",
+          "Attribut": "TECH",
+          "Beschreibung": "Medizinische Versorgung (x2)."
+        },
+        {
+          "Name": "Schloss knacken",
+          "Attribut": "TECH",
+          "Beschreibung": "Schlösser öffnen."
+        },
+        {
+          "Name": "Sprengtechnik",
+          "Attribut": "TECH",
+          "Beschreibung": "Sprengsätze legen und entschärfen (x2)."
+        },
+        {
+          "Name": "Taschendiebstahl",
+          "Attribut": "TECH",
+          "Beschreibung": "Unbemerkt Gegenstände entwenden."
+        },
+        {
+          "Name": "Waffentechnik",
+          "Attribut": "TECH",
+          "Beschreibung": "Waffen reparieren."
+        },
+        {
+          "Name": "Wasserfahrzeugtechnik",
+          "Attribut": "TECH",
+          "Beschreibung": "Boote und Schiffe warten."
+        }
+      ]
+    }
+  ]
+}

assets/js/service-worker.js.html

@@ -0,0 +1,101 @@
+---
+permalink: /assets/js/service-worker.js
+---
+
+const CACHE_NAME = "cyberpunk-cache-v1";
+const OFFLINE_URL = "/offline.html"; // Diese Seite wird angezeigt, wenn offline
+const BASE_PATH = "{{ "/" | relative_url }}";
+const SITEMAP_URL = BASE_PATH + "sitemap.json";
+
+const urlsToCache = [
+  BASE_PATH,
+  BASE_PATH + "offline.html",
+  /* CSS-Dateien */
+  BASE_PATH + "assets/css/main.css",
+  BASE_PATH + "assets/css/normalize.css",
+  BASE_PATH + "assets/css/cyberpunk.css",
+  /* JS-Dateien */
+  BASE_PATH + "assets/js/materialize.min.js",
+  BASE_PATH + "assets/js/service-worker.js",
+  /* PWA-Dateien */
+  BASE_PATH + "assets/manifest.json",
+  BASE_PATH + "assets/img/icon-192.png",
+  BASE_PATH + "assets/img/icon-512.png",
+  SITEMAP_URL,
+  /* Bilder, Schriften, etc. */
+  BASE_PATH + "assets/fonts/BlenderProBook.woff2",
+  BASE_PATH + "assets/fonts/Cyberpunk.otf",
+  BASE_PATH + "assets/fonts/Oxanium.woff2",
+  BASE_PATH + "assets/img/Netrunner.png",
+  BASE_PATH + "assets/img/Tech.png",
+  /* Game Data */
+  BASE_PATH + "assets/game-data/housings.json",
+  BASE_PATH + "assets/game-data/lifestyles.json",
+  BASE_PATH + "assets/game-data/skills.json",
+  BASE_PATH + "assets/game-data/characters/chase.json",
+  BASE_PATH + "assets/game-data/characters/carver.json",
+];
+
+/**
+ * Install-Event: Cache Standarddateien
+ */
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+/**
+ * Fetch-Event: Cache-First Strategie mit Offline-Fallback
+ */
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request).catch(() => {
+        return caches.match(OFFLINE_URL);
+      });
+    })
+  );
+});
+
+/**
+ * Wenn die Startseite geladen wird, lade automatisch alle Seiten aus der Sitemap in den Cache
+ */
+self.addEventListener("sync", (event) => {
+  if (event.tag === "cache-all-pages") {
+    event.waitUntil(
+      fetch(SITEMAP_URL)
+        .then((response) => response.json())
+        .then((data) => {
+          return caches.open(CACHE_NAME).then((cache) => {
+            return Promise.all(
+              data.pages.map((page) => {
+                return fetch(page.url)
+                  .then((response) => cache.put(page.url, response))
+                  .catch((err) => console.error("Fehler beim Cachen:", err));
+              })
+            );
+          });
+        })
+    );
+  }
+});
+
+/**
+ * Aktivierungs-Event: Löscht alten Cache
+ */
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cache) => {
+          if (cache !== CACHE_NAME) {
+            return caches.delete(cache);
+          }
+        })
+      );
+    })
+  );
+});

assets/manifest.json.html

@@ -0,0 +1,25 @@
+---
+permalink: /assets/manifest.json
+---
+
+{
+  "name": "{{ site.title }}",
+  "short_name": "CPRED",
+  "start_url": "{{ "/" | relative_url }}",
+  "display": "standalone",
+  "background_color": "#f8ef02",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "{{ "/assets/img/icon-192.png" | relative_url }}",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "{{ "/assets/img/icon-512.png" | relative_url }}",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
+

offline.html

@@ -0,0 +1,12 @@
+---
+title: Currently Offline
+permalink: /offline.html
+layout: page
+---
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Du bist zur Zeit offline!</strong></p>
+  <p>Sobald du wieder online bist wird diese Seite gecached.</p>
+</div>

renovate.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ],
+  "baseBranches": [
+    "develop"
+  ],
+  "skipInstalls": true,
+  "ignoreScripts": true,
+  "ignorePaths": [
+    "**/.github/**",
+    "**/.gitea/**"
+  ],
+  "osvVulnerabilityAlerts": true,
+  "reviewers": [
+    "f.weber"
+  ]
+}

sitemap.json.html

@@ -0,0 +1,11 @@
+---
+permalink: /sitemap.json
+---
+
+{
+  "pages": [
+    {% for page in site.pages %}
+      { "url": "{{ page.url | relative_url }}" }{% unless forloop.last %},{% endunless %}
+    {% endfor %}
+  ]
+}