jekyll build from Action 6a8bebbddb9d6b465a36e4554de4aa49fb213688

jekyll build from Action 3bae4ef3c4c0e7bd34ee1ffd418c5c12c1665d9d
jekyll build from Action 28fb8b918eae61efe1645db266cd609e8e4b5c80
2025-05-10 21:42:49 +00:00 · 2025-05-10 13:18:32 +00:00 · 2025-05-09 13:14:41 +00:00 · 2025-05-06 10:39:49 +00:00 · 2025-05-02 10:03:51 +00:00 · 2025-05-01 12:12:07 +00:00
53 changed files with 13678 additions and 537 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +0,0 @@
-_site
-.sass-cache
-.jekyll-cache
-.jekyll-metadata
-vendor
--- a/404.html
+++ b/404.html
@ -1,9 +1,89 @@
---
-title: Page not found
-permalink: /404.html
-layout: page
---
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Page not found - ThePhoenixDivision</title>

+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>404.html</span>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Page not found</h1>
 <style type="text/css" media="screen">
  .container {
    margin: 10px auto;
@ -24,3 +104,118 @@ layout: page
  <p><strong>Page not found :(</strong></p>
  <p>The requested page could not be found.</p>
 </div>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/33
+++ b/33
@ -1,33 +0,0 @@
-source "https://rubygems.org"
-# Hello! This is where you manage which Jekyll version is used to run.
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
-#
-#     bundle exec jekyll serve
-#
-# This will help ensure the proper Jekyll version is running.
-# 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"
-# 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
-# If you have any plugins, put them here!
-group :jekyll_plugins do
-  gem "jekyll-feed", "~> 0.12"
-end
-
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
-platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem "tzinfo", ">= 1", "< 3"
-  gem "tzinfo-data"
-end
-
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1", :platforms => [:mingw, :x64_mingw, :mswin]
-
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1,164 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
-    base64 (0.2.0)
-    bigdecimal (3.1.9)
-    colorator (1.1.0)
-    concurrent-ruby (1.3.5)
-    csv (3.3.2)
-    em-websocket (0.5.3)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0)
-    eventmachine (1.2.7)
-    ffi (1.17.1)
-    ffi (1.17.1-aarch64-linux-gnu)
-    ffi (1.17.1-aarch64-linux-musl)
-    ffi (1.17.1-arm-linux-gnu)
-    ffi (1.17.1-arm-linux-musl)
-    ffi (1.17.1-arm64-darwin)
-    ffi (1.17.1-x86-linux-gnu)
-    ffi (1.17.1-x86-linux-musl)
-    ffi (1.17.1-x86_64-darwin)
-    ffi (1.17.1-x86_64-linux-gnu)
-    ffi (1.17.1-x86_64-linux-musl)
-    forwardable-extended (2.6.0)
-    google-protobuf (4.30.1)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.30.1-aarch64-linux)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.30.1-arm64-darwin)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.30.1-x86-linux)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.30.1-x86_64-darwin)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.30.1-x86_64-linux)
-      bigdecimal
-      rake (>= 13)
-    http_parser.rb (0.8.0)
-    i18n (1.14.7)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.4.1)
-      addressable (~> 2.4)
-      base64 (~> 0.2)
-      colorator (~> 1.0)
-      csv (~> 3.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (>= 2.0, < 4.0)
-      jekyll-watch (~> 2.0)
-      json (~> 2.6)
-      kramdown (~> 2.3, >= 2.3.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (~> 0.3, >= 0.3.6)
-      pathutil (~> 0.9)
-      rouge (>= 3.0, < 5.0)
-      safe_yaml (~> 1.0)
-      terminal-table (>= 1.8, < 4.0)
-      webrick (~> 1.7)
-    jekyll-feed (0.17.0)
-      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)
-    kramdown (2.5.1)
-      rexml (>= 3.3.9)
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.4)
-    listen (3.9.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (6.0.1)
-    rake (13.2.1)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.11.1)
-      ffi (~> 1.0)
-    rexml (3.4.1)
-    rouge (4.5.1)
-    safe_yaml (1.0.5)
-    sass-embedded (1.85.1)
-      google-protobuf (~> 4.29)
-      rake (>= 13)
-    sass-embedded (1.85.1-aarch64-linux-android)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-aarch64-linux-gnu)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-aarch64-linux-musl)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-arm-linux-androideabi)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-arm-linux-gnueabihf)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-arm-linux-musleabihf)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-arm64-darwin)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-riscv64-linux-android)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-riscv64-linux-gnu)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-riscv64-linux-musl)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-x86_64-darwin)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-x86_64-linux-android)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-x86_64-linux-gnu)
-      google-protobuf (~> 4.29)
-    sass-embedded (1.85.1-x86_64-linux-musl)
-      google-protobuf (~> 4.29)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.6.0)
-    webrick (1.9.1)
-
-PLATFORMS
-  aarch64-linux
-  aarch64-linux-android
-  aarch64-linux-gnu
-  aarch64-linux-musl
-  arm-linux-androideabi
-  arm-linux-gnu
-  arm-linux-gnueabihf
-  arm-linux-musl
-  arm-linux-musleabihf
-  arm64-darwin
-  riscv64-linux-android
-  riscv64-linux-gnu
-  riscv64-linux-musl
-  ruby
-  x86-linux
-  x86-linux-gnu
-  x86-linux-musl
-  x86_64-darwin
-  x86_64-linux-android
-  x86_64-linux-gnu
-  x86_64-linux-musl
-
-DEPENDENCIES
-  http_parser.rb (~> 0.6.0)
-  jekyll (~> 4.4.1)
-  jekyll-feed (~> 0.12)
-  jekyll-theme-cyberpunk (~> 0.1.0)
-  tzinfo (>= 1, < 3)
-  tzinfo-data
-  wdm (~> 0.1)
-
-BUNDLED WITH
-   2.6.5
--- a/_config.yml
+++ b/_config.yml
@ -1,61 +0,0 @@
-# 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.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-
-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
-twitter_username: abc
-github_username:  abc
-
-# Build settings
-theme: jekyll-theme-cyberpunk
-plugins:
-  - jekyll-feed
-
-markdown: kramdown
-highlighter: rouge
-
-collections:
-  pages:
-    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/
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -1,12 +0,0 @@
-<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>
--- a/_includes/head.html
+++ b/_includes/head.html
@ -1,9 +0,0 @@
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>{{ page.title }} - {{ site.title }}</title>
-
-<!-- Stylesheets -->
-<link rel="stylesheet" href="{{ "/assets/css/normalize.css" | relative_url }}">
-<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-<link rel="stylesheet" href="{{ "/assets/css/cyberpunk.css" | relative_url }}">
--- a/_includes/header.html
+++ b/_includes/header.html
@ -1,36 +0,0 @@
-{% 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>
-</header>
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  {% include head.html %}
-</head>
-<body>
-  {% include header.html %}
-  <main>
-    {{ content }}
-  </main>
-  {% include footer.html %}
-</body>
-</html>
--- a/_layouts/home.html
+++ b/_layouts/home.html
@ -1,13 +0,0 @@
---
-layout: default
---
-
-{% 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>
-  </article>
-  <hr>
-{% endfor %}
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -1,6 +0,0 @@
---
-layout: default
---
-
-<h1 class="cyber-h">{{ page.title }}</h1>
-{{ content }}
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -1,9 +0,0 @@
---
-layout: default
---
-
-<article class="cyber-tile-big bg-dark" style="display: flex; flex-direction: column; margin: 0 auto;">
-  <h1 class="cyber-h">{{ page.title }}</h1>
-  <p><strong>Datum:</strong> <span class="cyber-glitch-4">{{ page.date | date: "%d.%m.%Y" }}</span></p>
-  {{ content }}
-</article>
--- a/_pages/about.md
+++ b/_pages/about.md
@ -1,7 +0,0 @@
---
-layout: page
-title: Charaktere
-permalink: /characters/
---
-
-TBD
--- a/_pages/lifepaths.md
+++ b/_pages/lifepaths.md
@ -1,104 +0,0 @@
---
-layout: page
-title: Lebensweg
-permalink: /lifepaths/
---
-
-## Kulturelle Herkunft
-{:.cyber-h}
-
-<strong>Wirf 1W10 oder wähle eine aus.</strong>
-
-| Wurf | Deine (allgemeine) Kulturregion | Sprachen, die du vielleicht kennst (Wähle eine aus deiner Gruppe aus)                          |
-| ---- | ------------------------------- | ---------------------------------------------------------------------------------------------- |
-| 1    | Nordamerikansich                | Chinsesisch, Cree, Englisch, Französisch, Kreol, Navajo, Spanisch                              |
-| 2    | Süd-/Mittelamerikanisch         | Deutsch, Englisch, Guarani, Kreol, Maya, Portugiesisch, Quechua, Spanisch                      |
-| 3    | Westeuropäisch                  | Deutsch, Englisch, Französisch, Holländisch, Italienisch, Norwegisch, Portugiesisch, Spanisch  |
-| 4    | Osteuropäisch                   | Englisch, Finnisch, Polnisch, Rumänisch, Russisch, Ukrainisch                                  |
-| 5    | Nahöstlich/Nordafrikanisch      | Arabisch, Berberisch, Englisch, Farsi, Französisch, Hebräisch, Türkisch                        |
-| 6    | Schwarzafrikansich              | Arabisch, Englisch, Französisch, Hausa, Lingala, Oromo, Portugiesisch, Swahili, Twi, Yoruba    |
-| 7    | Südasiatisch                    | Bengali, Dari, Englisch, Hindi, Nepalisch, Singhalesisch, Tamil, Urdu                          |
-| 8    | Südostasiatisch                 | Arabisch, Burnesisch, Englisch, Filipino, Hindi, Indonesisch, Khmer, Malaysisch, Vietnamesisch |
-| 9    | Ostasiatisch                    | Englisch, Japanisch, Kantonesisch, Koreanisch, Mandarin, Mongolisch                            |
-| 10   | Ozeanisch/Pazifikinsulaner      | Englisch, Französisch, Hawaiianisch, Maori, Pama-Nyunga, Tahitisch                             |
-{:.cyber-table .ac-red style="width: auto;"}
-
-## Deine Persönlichkeit
-{:.cyber-h}
-
-<strong>Wirf 1W10 oder wähle eine aus.</strong>
-
-| Wurf | Wie bist du?                           |
-| ---- | -------------------------------------- |
-| 1    | Zurückhaltend und geheimnisvoll        |
-| 2    | Rebellisch, antisozial und gewalttätig |
-| 3    | Arrogant, stolz und unnahbar           |
-| 4    | Launisch, impulsiv und eigenwillig     |
-| 5    | Pingelig, zimperlich und nervös        |
-| 6    | Gefestigt und ernst                    |
-| 7    | Albern und unverdrossen                |
-| 8    | Raffiniert und tückisch                |
-| 9    | Intelektuell und abgeklärt             |
-| 10   | Freundlich und offen                   |
-{:.cyber-table .ac-red style="width: auto;"}
-
-## Kleidung und persönlicher Stil
-{:.cyber-h}
-
-<strong>Wirf 1W10 für jede Spalte oder wähle eine aus jeder Spalte.</strong>
-
-| Wurf | Kleidungsstil                                        | Frisur              |
-| ---- | ---------------------------------------------------- | ------------------- |
-| 1    | Generisch-Modän (Standard, Farbenfroh, Modular)      | Mohawk              |
-| 2    | Freizeit (Bequem, Beweglich, Athletisch)             | Lang und verlottert |
-| 3    | Stadtprotz (Protzig, Technologisch, Straßenkleidung) | Kurz und stachelig  |
-| 4    | Geschäftlich (Führung, Präsenz, Autorität)           | Wild und wuschelig  |
-| 5    | Topmodisch (Exklusiv, Designer, Couture)             | Kahl                |
-| 6    | Ausgefallen (Volkstümlich, Retro, Freigeistig)       | Gestreift           |
-| 7    | Stadtstreicher-Chic (Obdachlos, Abgerissen, Unstet)  | Wilde Farben        |
-| 8    | Gangfarben (Gefährlich, Gewalttätig, Rebellisch)     | Sauber und kurz     |
-| 9    | Nomaden-Lederkluft (Western, Wild, Stammestracht)    | Kurz und lockig     |
-| 10   | Asia Pop (Grell, Kostümartig, Jugendlich)            | Lang und gerade     |
-{:.cyber-table .ac-red style="width: auto;"}
-
-<strong>Wirf 1W10 oder wähle eine aus.</strong>
-
-| Wurf | Vorlieben, ohne die man dich niemals sieht |
-| ---- | ------------------------------------------ |
-| 1    | Tätowierungen                              |
-| 2    | Verspiegelte Sonnenbrille                  |
-| 3    | Rituelle Narben                            |
-| 4    | Nagelhandschuhe                            |
-| 5    | Nasenringe                                 |
-| 6    | Piercing in der Zunge oder anderswo        |
-| 7    | Seltsame Fingernagelimplantate             |
-| 8    | Stiefel oder Stöckelschuhe mit Nägeln      |
-| 9    | Fingerlose Handschuhe                      |
-| 10   | Komische Kontaktlinsen                     |
-{:.cyber-table .ac-red style="width: auto;"}
-
-## Deine Motivation und Beziehungen
-{:.cyber-h}
-
-### Was du am meisten schätzt
-{:.cyber-h}
-
-## Deine Familiäre Herkunft
-{:.cyber-h}
-
-## Dein Umfeld
-{:.cyber-h}
-
-## Deine Familienkrise
-{:.cyber-h}
-
-## Süße Rache
-{:.cyber-h}
-
-## Deine Lebensziele
-{:.cyber-h}
-
-## Deine Freunde, Deine Feinde, Deine tragische(n) Liebschaft(en)
-{:.cyber-h}
-
-Diese Dinge werden per Zufall ausgewürfelt und müssen Vorort geklärt werden.
--- a/_pages/roles.md
+++ b/_pages/roles.md
@ -1,7 +0,0 @@
---
-layout: page
-title: Rollen
-permalink: /roles/
---
-
-TBD
--- a/_posts/2025-03-16-welcome-to-jekyll.markdown
+++ b/_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/
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@ -1,12 +0,0 @@
-body {
-  max-height: 100vh;
-  overflow-y: scroll;
-}
-
-main {
-  height: calc(100vh - 124px);
-  overflow-y: scroll;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
--- a/_sass/_syntax.scss
+++ b/_sass/_syntax.scss
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
--- a/_sass/cyberpunk-theme.scss
+++ b/_sass/cyberpunk-theme.scss
@ -1,3 +0,0 @@
-@import "variables";
-@import "layout";
-@import "syntax";
--- a/assets/css/main.css
+++ b/assets/css/main.css
--- a/assets/css/main.css.map
+++ b/assets/css/main.css.map
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@ -1,5 +0,0 @@
---
---
-
-@import "materialize.scss",
-        "cyberpunk-theme";
--- a/assets/game-data/characters/carver.json
+++ b/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"
+}
--- a/assets/game-data/characters/chase.json
+++ b/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"
+}
--- a/assets/game-data/housings.json
+++ b/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
+  }
+}
--- a/assets/game-data/lifestyles.json
+++ b/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."
+  }
+}
--- a/assets/game-data/skills.json
+++ b/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."
+        }
+      ]
+    }
+  ]
+}
--- a/assets/img/JumpstartEdgeRunners-2.png
+++ b/assets/img/JumpstartEdgeRunners-2.png
--- a/assets/img/Netrunner.png
+++ b/assets/img/Netrunner.png
--- a/assets/img/Rocker.png
+++ b/assets/img/Rocker.png
--- a/assets/img/Tech.png
+++ b/assets/img/Tech.png
--- a/assets/img/icon-192.png
+++ b/assets/img/icon-192.png
--- a/assets/img/icon-512.png
+++ b/assets/img/icon-512.png
--- a/assets/js/service-worker.js
+++ b/assets/js/service-worker.js
@ -0,0 +1,97 @@
+const CACHE_NAME = "cyberpunk-cache-v1";
+const OFFLINE_URL = "/offline.html"; // Diese Seite wird angezeigt, wenn offline
+const BASE_PATH = "/cpred/";
+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);
+          }
+        })
+      );
+    })
+  );
+});
--- a/assets/manifest.json
+++ b/assets/manifest.json
@ -0,0 +1,21 @@
+{
+  "name": "ThePhoenixDivision",
+  "short_name": "CPRED",
+  "start_url": "/cpred/",
+  "display": "standalone",
+  "background_color": "#f8ef02",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/cpred/assets/img/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/cpred/assets/img/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
+
--- a/attributes/index.html
+++ b/attributes/index.html
@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Attribute - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a fg-yellow">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>attributes</span>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Attribute</h1>
+<p>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.</p>
+
+<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>
+
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/characters/chase.html
+++ b/characters/chase.html
@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Chase Révolte - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a fg-yellow">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>characters</span>
+      
+    
+      
+      
+
+      
+        › <a href="/cpred/characters/chase">Chase Révolte</a>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Chase Révolte</h1>
+<div class="row">
+  
+  <div class="col s6 m4 l1 responsive-img">
+    <img class="responsive-img" src="/cpred/assets/img/Netrunner.png" alt="Picture of Chase Révolte" />
+  </div>
+  
+  <div class="bg-dark fg-yellow cyber-tile col s12 m8 l11">
+    <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>
+
+
+
+<script>
+  let char, housing, lifestyle;
+  fetch("/cpred/assets/game-data/characters/chase.json")
+    .then(response => response.json())
+    .then(character => {
+      char = character;
+      return fetch("/cpred/assets/game-data/housings.json");
+    }).then(response => response.json())
+    .then(housings => {
+      housing = housings[char.housing.type];
+      return fetch("/cpred/assets/game-data/lifestyles.json");
+    }).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>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/characters/crash.html
+++ b/characters/crash.html
@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Carver Riggs - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a fg-yellow">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>characters</span>
+      
+    
+      
+      
+
+      
+        › <a href="/cpred/characters/crash">Carver Riggs</a>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Carver Riggs</h1>
+<div class="row">
+  
+  <div class="col s6 m4 l1 responsive-img">
+    <img class="responsive-img" src="/cpred/assets/img/Tech.png" alt="Picture of Carver Riggs" />
+  </div>
+  
+  <div class="bg-dark fg-yellow cyber-tile col s12 m8 l11">
+    <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>
+
+
+
+<script>
+  let char, housing, lifestyle;
+  fetch("/cpred/assets/game-data/characters/carver.json")
+    .then(response => response.json())
+    .then(character => {
+      char = character;
+      return fetch("/cpred/assets/game-data/housings.json");
+    }).then(response => response.json())
+    .then(housings => {
+      housing = housings[char.housing.type];
+      return fetch("/cpred/assets/game-data/lifestyles.json");
+    }).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>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/characters/index.html
+++ b/characters/index.html
@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Charaktere - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a fg-yellow">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>characters</span>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Charaktere</h1>
+<div class="row" style="column-gap: 5px;">
+  <div class="col s12 l6">
+    <div class="cyber-tile cyber-tile-big bg-red fg-dark " style="min-height: auto;">
+  
+  <img class="responsive-img" src="/cpred/assets/img/Netrunner.png" alt="Character Picture" />
+  
+  <p><span class="cyberpunk-font">Name:</span>&nbsp;&nbsp;<span id="name-chase"></span></p>
+  <p><span class="cyberpunk-font">Handle:</span>&nbsp;&nbsp;<span id="streetname-chase"></span></p>
+  <p><span class="cyberpunk-font">Role:</span>&nbsp;&nbsp;<span id="role-chase"></span></p>
+  <p><span class="cyberpunk-font">Age:</span>&nbsp;&nbsp;<span id="age-chase"></span></p>
+  
+  <button class="cyber-button bg-purple fg-white" onclick="window.location.href='/cpred/characters/chase'">
+    Screamsheet
+    <span class="glitchtext">teehsmaercS</span>
+    <span class="tag">NETR</span>
+  </button>
+  
+</div>
+<script>
+  fetch("/cpred/assets/game-data/characters/chase.json")
+    .then(response => response.json())
+    .then(character => {
+      document.getElementById('name-chase').innerText = character.name;
+      document.getElementById('streetname-chase').innerText = character.handle;
+      document.getElementById('age-chase').innerText = character.age;
+      const mainRole = character.roles.find(role => role.main);
+      document.getElementById('role-chase').innerText = mainRole.name + " Rang: " + mainRole.rank;
+    });
+</script>
+
+  </div>
+  <div class="col s12 l6">
+    <div class="cyber-tile cyber-tile-big bg-red fg-purple " style="min-height: auto;">
+  
+  <img class="responsive-img" src="/cpred/assets/img/Tech.png" alt="Character Picture" />
+  
+  <p><span class="cyberpunk-font">Name:</span>&nbsp;&nbsp;<span id="name-carver"></span></p>
+  <p><span class="cyberpunk-font">Handle:</span>&nbsp;&nbsp;<span id="streetname-carver"></span></p>
+  <p><span class="cyberpunk-font">Role:</span>&nbsp;&nbsp;<span id="role-carver"></span></p>
+  <p><span class="cyberpunk-font">Age:</span>&nbsp;&nbsp;<span id="age-carver"></span></p>
+  
+  <button class="cyber-button bg-purple fg-white" onclick="window.location.href='/cpred/characters/crash'">
+    Screamsheet
+    <span class="glitchtext">teehsmaercS</span>
+    <span class="tag">NETR</span>
+  </button>
+  
+</div>
+<script>
+  fetch("/cpred/assets/game-data/characters/carver.json")
+    .then(response => response.json())
+    .then(character => {
+      document.getElementById('name-carver').innerText = character.name;
+      document.getElementById('streetname-carver').innerText = character.handle;
+      document.getElementById('age-carver').innerText = character.age;
+      const mainRole = character.roles.find(role => role.main);
+      document.getElementById('role-carver').innerText = mainRole.name + " Rang: " + mainRole.rank;
+    });
+</script>
+
+  </div>
+</div>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/feed.xml
+++ b/feed.xml
@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="https://phoenixdivision.morlana.space/cpred/feed.xml" rel="self" type="application/atom+xml" /><link href="https://phoenixdivision.morlana.space/cpred/" rel="alternate" type="text/html" /><updated>2025-05-10T21:42:48+00:00</updated><id>https://phoenixdivision.morlana.space/cpred/feed.xml</id><title type="html">ThePhoenixDivision</title><subtitle>We will share our adventures in Cyberpunk Red here.</subtitle></feed>
--- a/index.html
+++ b/index.html
@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Die Rote Ära - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a fg-yellow">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    
+  <div class="cyber-att-2" style="margin: 32px 0;">Es gibt noch keine Neuigkeiten...</div>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-red"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/index.md
+++ b/index.md
@ -1,4 +0,0 @@
---
-layout: home
-title: Die Rote Ära
---
--- a/lifepaths/index.html
+++ b/lifepaths/index.html
@ -0,0 +1,866 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Lebensweg - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a fg-yellow">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>lifepaths</span>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Lebensweg</h1>
+<ul class="cyber-ul">
+  <li><a href="#kulturelle-herkunft" class="cyber-a">Kulturelle Herkunft</a></li>
+  <li><a href="#deine-persönlichkeit" class="cyber-a">Deine Persönlichkeit</a></li>
+  <li><a href="#kleidung-und-persönlicher-stil" class="cyber-a">Kleidung und persönlicher Stil</a></li>
+  <li><a href="#deine-motivation-und-beziehungen" class="cyber-a">Deine Motivation und Beziehungen</a></li>
+  <li><a href="#was-du-am-meisten-schätzt" class="cyber-a">Was du am meisten schätzt</a></li>
+  <li><a href="#deine-familiäre-herkunft" class="cyber-a">Deine Familiäre Herkunft</a></li>
+  <li><a href="#dein-umfeld" class="cyber-a">Dein Umfeld</a></li>
+  <li><a href="#deine-familienkrise" class="cyber-a">Deine Familienkrise</a></li>
+  <li><a href="#deine-lebensziele" class="cyber-a">Deine Lebensziele</a></li>
+  <li><a href="#deine-freunde-deine-feinde-deine-tragischen-liebschaften-süße-rache" class="cyber-a">Deine Freunde, Deine Feinde, Deine tragische(n) Liebschaft(en), Süße Rache</a></li>
+</ul>
+
+<h2 class="cyber-h" id="kulturelle-herkunft">Kulturelle Herkunft</h2>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Deine (allgemeine) Kulturregion</th>
+      <th>Sprachen, die du vielleicht kennst (Wähle eine aus deiner Gruppe aus)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Nordamerikansich</td>
+      <td>Chinsesisch, Cree, Englisch, Französisch, Kreol, Navajo, Spanisch</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Süd-/Mittelamerikanisch</td>
+      <td>Deutsch, Englisch, Guarani, Kreol, Maya, Portugiesisch, Quechua, Spanisch</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Westeuropäisch</td>
+      <td>Deutsch, Englisch, Französisch, Holländisch, Italienisch, Norwegisch, Portugiesisch, Spanisch</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Osteuropäisch</td>
+      <td>Englisch, Finnisch, Polnisch, Rumänisch, Russisch, Ukrainisch</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Nahöstlich/Nordafrikanisch</td>
+      <td>Arabisch, Berberisch, Englisch, Farsi, Französisch, Hebräisch, Türkisch</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Schwarzafrikansich</td>
+      <td>Arabisch, Englisch, Französisch, Hausa, Lingala, Oromo, Portugiesisch, Swahili, Twi, Yoruba</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Südasiatisch</td>
+      <td>Bengali, Dari, Englisch, Hindi, Nepalisch, Singhalesisch, Tamil, Urdu</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Südostasiatisch</td>
+      <td>Arabisch, Burnesisch, Englisch, Filipino, Hindi, Indonesisch, Khmer, Malaysisch, Vietnamesisch</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Ostasiatisch</td>
+      <td>Englisch, Japanisch, Kantonesisch, Koreanisch, Mandarin, Mongolisch</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Ozeanisch/Pazifikinsulaner</td>
+      <td>Englisch, Französisch, Hawaiianisch, Maori, Pama-Nyunga, Tahitisch</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="deine-persönlichkeit">Deine Persönlichkeit</h2>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Wie bist du?</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Zurückhaltend und geheimnisvoll</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Rebellisch, antisozial und gewalttätig</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Arrogant, stolz und unnahbar</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Launisch, impulsiv und eigenwillig</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Pingelig, zimperlich und nervös</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Gefestigt und ernst</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Albern und unverdrossen</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Raffiniert und tückisch</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Intelektuell und abgeklärt</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Freundlich und offen</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="kleidung-und-persönlicher-stil">Kleidung und persönlicher Stil</h2>
+
+<p><strong>Wirf 1W10 für jede Spalte oder wähle eine aus jeder Spalte.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Kleidungsstil</th>
+      <th>Frisur</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Generisch-Modän (Standard, Farbenfroh, Modular)</td>
+      <td>Mohawk</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Freizeit (Bequem, Beweglich, Athletisch)</td>
+      <td>Lang und verlottert</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Stadtprotz (Protzig, Technologisch, Straßenkleidung)</td>
+      <td>Kurz und stachelig</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Geschäftlich (Führung, Präsenz, Autorität)</td>
+      <td>Wild und wuschelig</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Topmodisch (Exklusiv, Designer, Couture)</td>
+      <td>Kahl</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Ausgefallen (Volkstümlich, Retro, Freigeistig)</td>
+      <td>Gestreift</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Stadtstreicher-Chic (Obdachlos, Abgerissen, Unstet)</td>
+      <td>Wilde Farben</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Gangfarben (Gefährlich, Gewalttätig, Rebellisch)</td>
+      <td>Sauber und kurz</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Nomaden-Lederkluft (Western, Wild, Stammestracht)</td>
+      <td>Kurz und lockig</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Asia Pop (Grell, Kostümartig, Jugendlich)</td>
+      <td>Lang und gerade</td>
+    </tr>
+  </tbody>
+</table>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Vorlieben, ohne die man dich niemals sieht</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Tätowierungen</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Verspiegelte Sonnenbrille</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Rituelle Narben</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Nagelhandschuhe</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Nasenringe</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Piercing in der Zunge oder anderswo</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Seltsame Fingernagelimplantate</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Stiefel oder Stöckelschuhe mit Nägeln</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Fingerlose Handschuhe</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Komische Kontaktlinsen</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="deine-motivation-und-beziehungen">Deine Motivation und Beziehungen</h2>
+
+<p><strong>Wirf 1W10 für jede Spalte oder wähle eine aus jeder Spalte.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Was schätzt du am meisten?</th>
+      <th>Was hältst du von den meisten Leuten?</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Geld</td>
+      <td>Ich bleibe neutral.</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Ehre</td>
+      <td>Ich bleibe neutral.</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Dein Wort</td>
+      <td>Ich mag so gut wie alle.</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Ehrlichkeit</td>
+      <td>Ich hasse so gut wie alle.</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Wissen</td>
+      <td>Menschen sind Werkzeuge. Benutze sie und wirf sie dann weg.</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Rache</td>
+      <td>Jeder Mensch ist ein wertvolles Individuum.</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Liebe</td>
+      <td>Menschen sind Hindernisse, die vernichtet werden müssen, wenn sie mich nerven.</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Macht</td>
+      <td>Man kann Menschen nicht vertrauen. Verlass dich auf niemanden.</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Familie</td>
+      <td>Lösch sie alle aus - sollen die Kakerlaken die Macht übernehmen.</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Freundschaft</td>
+      <td>Menschen sind wunderbar!</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 class="cyber-h" id="was-du-am-meisten-schätzt">Was du am meisten schätzt</h3>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Welche Menschen sind für dich am wertvollsten?</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Ein Elternteil</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Ein Bruder oder eine Schwester</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Eine Liebschaft</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Ein Freund</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Du selbst</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Ein Haustier</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Ein Lehrer oder Mentor</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Eine öffentliche Person</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Ein persönliches Held</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Niemand</td>
+    </tr>
+  </tbody>
+</table>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Was ist dein wertvollster Besitz?</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Eine Waffe</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Ein Werkzeug</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Ein Kleidungsstück</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Eine Fotografie</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Ein Buch oder Tagebuch</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Eine Aufnahme</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Ein Musikinstrument</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Ein Schmuckstück</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Ein Spielzeug</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Ein Brief</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="deine-familiäre-herkunft">Deine Familiäre Herkunft</h2>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Ursprünfliche Herkunft</th>
+      <th>Beschreibung</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Konzerngeschäftsführer</td>
+      <td>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.</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Konzernmanager</td>
+      <td>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.</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Konzerntechniker</td>
+      <td>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.</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Nomadenrudel</td>
+      <td>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.</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Gang-“Familie”</td>
+      <td>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?</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Kriegszonenbewohner</td>
+      <td>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.</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Städtische Obdachlose</td>
+      <td>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.</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Megabauten</td>
+      <td>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.</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Reclaimer</td>
+      <td>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.</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Edgerunner</td>
+      <td>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.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="dein-umfeld">Dein Umfeld</h2>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Umfeld deiner Herkunft</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Auf der Straße rumgetrieben, ohne Aufsicht durch Erwachsene.</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>In einer Konzone verbracht, durch Mauern vom Rest der City getrennt.</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>In einem Nomadenrudel, ständig auf Achse.</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>In einem Nomadenrudel mit Wurzeln im Transport (Schiffe, Flugzeuge, Wohnwagen).</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>In einem verfallenden, früher gehobenen Viertel, das zum Überleben jetzt die Booster zurückschlagen muss.</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Inmitten einer Kriegszone, Leben in einem zerstörten Gebäude oder in irgendeinem anderen Gemäuer.</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>In einem riesigen “Megabau”, der von einem Konzern oder der City kontrolliert wird.</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>In den Ruinen einer verlassenen Stadt, die von Reclaimers übernommen wurde.</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>In einer Schwimmenden Nation (einer treibenden, der Küste vorgelagerten Statd), die ein Treffpunkt für Menschen aller Couleur ist.</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>In einem luxuriösen “Sternenkratzer” eines Konzerns, hoch über dem Rest des wimmelnden Pöbels.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="deine-familienkrise">Deine Familienkrise</h2>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Hintergrund</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Deine Familie hat alles durch Verrat verloren.</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Deine Familie hat alles durch schlechtes Management verloren.</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Deine Familie wurde verbannt oder auf anderem Wege aus ihrer Heimat / ihrer Nation / ihrem Konzern vertrieben.</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>Deine Familie wurde gefangen genommen und nur du konntest entkommen.</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Deine Familie ist verschwunden. Du bist als Einziger übriggeblieben.</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Deine Familie wurde getötet und nur du hast überlebt.</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Deine Familie ist in eine Langzeitverschwörung, eine Organisation oder Vereinigung verwickelt, beispielsweise eine Verbrecherfamilie oder eine revolutionäre Gruppe.</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Aufgrund eines Unglücks ist deine Familie in alle vier Himmelsrichtungen verstreut.</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Deine Familie trägt die Last einer Erbfehde, die schon Generationen anhält.</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Du bist Erbe der Familienschulden. Du musst die Schuld begleichen, bevor du dein Leben weiterführen kannst.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="deine-lebensziele">Deine Lebensziele</h2>
+
+<p><strong>Wirf 1W10 oder wähle eine aus.</strong></p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Wurf</th>
+      <th>Lebensziele</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Einen schlechten Ruf loswerden.</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Macht und Kontroller erlangen.</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Von der Straße wegkommen, was auch immer es kosten mag.</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>All jenen Schmerz und Leid zufügen, die dir in die Quere kommen.</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>Dein altes Leben hinter dir lassen und versuchen, es zu vergessen.</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>Die für dein mieses Leben Verantwortlichen jagen und sie dafür büßen lassen.</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>Bekommen, was dir rechtmäßig zusteht.</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>Wenn möglich, jemanden aus deinem Hintergrund retten, wie eine Liebschaft oder Familienmitglied.</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>Ruhm und Anerkennung gewinnen.</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>Gefürchtet und respektiert werden.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="deine-freunde-deine-feinde-deine-tragischen-liebschaften-süße-rache">Deine Freunde, Deine Feinde, Deine tragische(n) Liebschaft(en), Süße Rache</h2>
+
+<p>Diese Dinge werden per Zufall ausgewürfelt und müssen Vorort geklärt werden.</p>
+
+<h2 class="cyber-h" id="rollenbasierte-lebenswege">Rollenbasierte Lebenswege</h2>
+
+<p>Rollenbasierte Lebenswege werden wie Freunde, Feinde und Liebschaften auch vor Ort bestimmt.</p>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/offline.html
+++ b/offline.html
@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Currently Offline - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>offline.html</span>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Currently Offline</h1>
+<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>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/player-guides.html
+++ b/player-guides.html
@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Player Guides - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a fg-yellow">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <a href="/cpred/player-guides">Player Guides</a>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Player Guides</h1>
+<ul class="cyber-ul">
+  <li><a href="/cpred/player-guides/netrunner" class="cyber-a">Netrunner Guide</a></li>
+  <li><a href="/cpred/player-guides/tech" class="cyber-a">Tech Guide</a></li>
+</ul>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/player-guides/netrunner.html
+++ b/player-guides/netrunner.html
@ -0,0 +1,871 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Netrunner Guide - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a fg-yellow">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <a href="/cpred/player-guides">Player Guides</a>
+      
+    
+      
+      
+
+      
+        › <a href="/cpred/player-guides/netrunner">Netrunner Guide</a>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Netrunner Guide</h1>
+<div id="toc"></div>
+
+<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>
+
+<p>Zu Beginn eines Kampfes wüfeln alle ihre Initiative aus:<br /></p>
+<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>
+
+<p>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.</p>
+
+<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>
+
+<h2 class="cyber-h" id="netrunner-rollenfähigkeit-interface">Netrunner (Rollenfähigkeit: <code class="language-plaintext highlighter-rouge">Interface</code>)</h2>
+
+<p>Die Rollenfähigkeit <code class="language-plaintext highlighter-rouge">Interface</code> erlaubt es Netrunnern, sogenannte <strong>NET-Läufe</strong> durchzuführen. Je höher der <code class="language-plaintext highlighter-rouge">Interface</code>-Rang, desto mehr <strong>NET-Aktionen pro Zug</strong> sind möglich und desto mehr <strong>Interface-Programme (Apps)</strong> stehen zur Verfügung.</p>
+
+<h3 class="cyber-h" id="net-aktionen-pro-zug">NET-Aktionen pro Zug</h3>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Interface-Rang</th>
+      <th>NET-Aktionen</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1–3</td>
+      <td>2</td>
+    </tr>
+    <tr>
+      <td>4–6</td>
+      <td>3</td>
+    </tr>
+    <tr>
+      <td>7–9</td>
+      <td>4</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>5</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 class="cyber-h" id="interface-apps">Interface-Apps</h3>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Fähigkeit</th>
+      <th>Beschreibung</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><strong>Hintertür</strong></td>
+      <td>Durchbrechen von Passwörtern und Hindernissen in Architekturen.</td>
+    </tr>
+    <tr>
+      <td><strong>Deckmantel</strong></td>
+      <td>Aktionen im Netz verbergen, bevor das Netz sie registriert.</td>
+    </tr>
+    <tr>
+      <td><strong>Kontrolle</strong></td>
+      <td>Kontrolle über vernetzte Geräte in der Architektur.</td>
+    </tr>
+    <tr>
+      <td><strong>Auswertung</strong></td>
+      <td>Zugriff auf Peripheriedaten aus Architekturen.</td>
+    </tr>
+    <tr>
+      <td><strong>Kundschafter</strong></td>
+      <td>„Karte“ der Architektur aufdecken.</td>
+    </tr>
+    <tr>
+      <td><strong>Scanner</strong></td>
+      <td>Nach Geräten oder Zugangspunkten suchen.</td>
+    </tr>
+    <tr>
+      <td><strong>Abfangen</strong></td>
+      <td>Eingehende Kommunikation oder Datenpakete abfangen.</td>
+    </tr>
+    <tr>
+      <td><strong>Virus</strong></td>
+      <td>Einen Virus in der Architektur platzieren.</td>
+    </tr>
+    <tr>
+      <td><strong>Schocker</strong></td>
+      <td>Einfacher Netrunner-Angriff auf Programme oder andere Netrunner.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 class="cyber-h" id="netrun-durchführen">Netrun durchführen</h2>
+
+<h2 class="cyber-h" id="voraussetzungen">Voraussetzungen</h2>
+
+<p>Um als Netrunner effektiv arbeiten zu können, brauchst du:</p>
+
+<ul class="cyber-ul">
+  <li><strong>Virtuellen Zugang</strong> (z. B. über Virtuality-Brille)</li>
+  <li><strong>Cyberdeck</strong> mit geladenen Programmen</li>
+  <li>Die Rollenfähigkeit <strong>Interface</strong></li>
+</ul>
+
+<hr />
+
+<h2 class="cyber-h" id="net-aktionen-pro-zug-1">NET-Aktionen pro Zug</h2>
+
+<p>Je nach Rang in deiner Rollenfähigkeit <code class="language-plaintext highlighter-rouge">Interface</code> hast du folgende Anzahl an <strong>NET-Aktionen pro Runde</strong>:</p>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Interface-Rang</th>
+      <th>NET-Aktionen</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1–3</td>
+      <td>2</td>
+    </tr>
+    <tr>
+      <td>4–6</td>
+      <td>3</td>
+    </tr>
+    <tr>
+      <td>7–9</td>
+      <td>4</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>5</td>
+    </tr>
+  </tbody>
+</table>
+
+<blockquote>
+  <p>Du darfst pro Zug <strong>entweder</strong> eine Fleischaktion <strong>oder</strong> so viele NET-Aktionen durchführen, wie dir zustehen. Zusätzlich steht dir immer <strong>eine Bewegungsaktion</strong> zur Verfügung.</p>
+</blockquote>
+
+<hr />
+
+<h2 class="cyber-h" id="liste-der-net-aktionen">Liste der NET-Aktionen</h2>
+
+<h3 class="cyber-h" id="allgemeine-net-aktionen">Allgemeine NET-Aktionen</h3>
+
+<ul class="cyber-ul">
+  <li><strong>Ein-/Ausklinken</strong>: Zugangspunkt betreten oder verlassen (max. 6 m Entfernung).</li>
+  <li><strong>Interface-App einsetzen</strong>: Eine App aus deinem Cyberdeck aktivieren.</li>
+  <li><strong>Programm aktivieren/deaktivieren</strong>: Aktiviert oder deaktiviert eines deiner Programme.</li>
+  <li><strong>Sonstiges</strong>: Z. B. Virus platzieren, Zugriff manipulieren.</li>
+</ul>
+
+<h3 class="cyber-h" id="was-ist-keine-net-aktion">Was ist keine NET-Aktion?</h3>
+
+<ul class="cyber-ul">
+  <li><strong>Dateikopie speichern</strong>: Eine gefundene Datei auf deinem Cyberdeck speichern.</li>
+  <li><strong>Bewegen in einer NET-Architektur</strong>: 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.</li>
+</ul>
+
+<hr />
+
+<h2 class="cyber-h" id="interface-apps-mit-net-aktion-einsetzbar">Interface-Apps (mit NET-Aktion einsetzbar)</h2>
+
+<p>Diese Apps (außer Schocker) benötigen:</p>
+
+<p><strong>Interface + 1W10 gegen SG</strong></p>
+
+<h3 class="cyber-h" id="übersicht">Übersicht</h3>
+
+<table>
+  <thead>
+    <tr>
+      <th>App</th>
+      <th>Funktion</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><strong>Scanner</strong></td>
+      <td>Findet Zugangspunkte in der Umgebung. Wird als Fleischaktion eingesetzt.</td>
+    </tr>
+    <tr>
+      <td><strong>Hintertür</strong></td>
+      <td>Öffnet gesicherte Zugänge mit Passwörtern oder Sperren.</td>
+    </tr>
+    <tr>
+      <td><strong>Deckmantel</strong></td>
+      <td>Versteckt deine Aktionen und schützt vor Erkennung.</td>
+    </tr>
+    <tr>
+      <td><strong>Kontrolle</strong></td>
+      <td>Übernimmt Geräte, die über Kontrollknoten verbunden sind.</td>
+    </tr>
+    <tr>
+      <td><strong>Auswertung</strong></td>
+      <td>Erkennt und analysiert Daten oder Dateien.</td>
+    </tr>
+    <tr>
+      <td><strong>Kundschafter</strong></td>
+      <td>Deckt Teile der NET-Architektur („Karte“) auf.</td>
+    </tr>
+    <tr>
+      <td><strong>Virus</strong></td>
+      <td>Lässt einen Virus zurück, der Systeme beeinflusst. (SG vom SL abhängig)</td>
+    </tr>
+    <tr>
+      <td><strong>Abgang</strong></td>
+      <td>Verlässt ein Stockwerk der NET-Architektur bei Kampf gegen Schwarzes ICE.</td>
+    </tr>
+    <tr>
+      <td><strong>Schocker</strong></td>
+      <td>Führt einen Angriff auf Programme oder andere Netrunner aus. (s. Kampf im NET)</td>
+    </tr>
+  </tbody>
+</table>
+
+<hr />
+
+<h2 class="cyber-h" id="kampf-im-net">Kampf im NET</h2>
+
+<p>Wenn es zu Gewalt im Cyberspace kommt, läuft es wie folgt ab:</p>
+
+<p><strong>Angreifer (z. B. Netrunner):</strong><br />
+<code class="language-plaintext highlighter-rouge">Interface + Programm-ANG + 1W10</code></p>
+
+<p><strong>Verteidiger (Ziel oder Schwarzes ICE):</strong><br />
+<code class="language-plaintext highlighter-rouge">Interface + 1W10</code> oder <code class="language-plaintext highlighter-rouge">Programm-VER + 1W10</code></p>
+
+<blockquote>
+  <p>Trifft der Angriff, wirkt der Effekt des Programms. Programme können zerstört werden, wenn ihre <strong>Integrität (TP)</strong> auf 0 fällt.</p>
+</blockquote>
+
+<hr />
+
+<h2 class="cyber-h" id="programme">Programme</h2>
+
+<p>Programme sind deine Werkzeuge im Cyberspace. Du kannst sie <strong>aktivieren oder deaktivieren</strong> (je 1 NET-Aktion).</p>
+
+<ul class="cyber-ul">
+  <li><strong>Ein Programm kann nur einmal pro Fleischraum-Runde aktiviert werden.</strong></li>
+  <li>Du kannst mehrere Kopien desselben Programms aktiv haben.</li>
+  <li><strong>Angriffsprogramme</strong> deaktivieren sich nach dem Einsatz automatisch.</li>
+</ul>
+
+<blockquote>
+  <p>Das <strong>Installieren oder Deinstallieren eines Programms dauert eine Stunde.</strong></p>
+</blockquote>
+
+<hr />
+
+<h2 class="cyber-h" id="tipps-für-effektives-netrunning">Tipps für effektives Netrunning</h2>
+
+<ul class="cyber-ul">
+  <li><strong>Vorbereitung ist alles</strong>: Lade deine Programme rechtzeitig.</li>
+  <li><strong>Bleib in Deckung</strong>: Im Fleischraum bist du während NET-Aktionen verwundbar.</li>
+  <li><strong>Scannen zuerst</strong>: Bevor du dich einklinkst, finde die Zugangspunkte mit dem Scanner.</li>
+  <li><strong>ICE sind gefährlich</strong>: Plane deinen Abgang und halte Ausweichrouten offen.</li>
+  <li><strong>Steuer deine Umgebung</strong>: Mit Kontroll-Apps kannst du Kameras, Türen und Fallen übernehmen.</li>
+</ul>
+
+<hr />
+
+
+<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>
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/player-guides/tech.html
+++ b/player-guides/tech.html
@ -0,0 +1,760 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Tech Guide - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a fg-yellow">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <a href="/cpred/player-guides">Player Guides</a>
+      
+    
+      
+      
+
+      
+        › <a href="/cpred/player-guides/tech">Tech Guide</a>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Tech Guide</h1>
+<div id="toc"></div>
+
+<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>
+
+<p>Zu Beginn eines Kampfes wüfeln alle ihre Initiative aus:<br /></p>
+<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>
+
+<p>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.</p>
+
+<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>
+
+<h2 class="cyber-h" id="tech-rollenfähigkeit-bastler">Tech (Rollenfähigkeit: <code class="language-plaintext highlighter-rouge">Bastler</code>)</h2>
+
+<p>Techs nutzen die Rollenfähigkeit <code class="language-plaintext highlighter-rouge">Bastler</code>, um Geräte zu <strong>reparieren</strong>, <strong>verbessern</strong>, <strong>erfinden</strong> und <strong>bauen</strong>.</p>
+
+<p>Jedes Mal, wenn ein Tech seinen <code class="language-plaintext highlighter-rouge">Bastler</code>-Rang erhöht, erhält er <strong>1 Rang in zwei Bastler-Spezialisierungen</strong> seiner Wahl:</p>
+
+<ul>
+  <li><strong>Feldkompetenz</strong></li>
+  <li><strong>Aufrüstungskompetenz</strong></li>
+  <li><strong>Herstellungskompetenz</strong></li>
+  <li><strong>Erfindungskompetenz</strong></li>
+</ul>
+
+<hr />
+
+<h3 class="cyber-h" id="bastler-spezialisierungen">Bastler-Spezialisierungen</h3>
+
+<h4 class="cyber-h" id="feldkompetenz"><strong>Feldkompetenz</strong></h4>
+
+<blockquote>
+  <p>Spezialisiert auf schnelle Notfallreparaturen in stressigen Situationen.</p>
+</blockquote>
+
+<ul>
+  <li>Addiere deinen Rang in Feldkompetenz auf alle Proben mit:
+    <ul>
+      <li>Basistechnik</li>
+      <li>Cybertech</li>
+      <li>Elektronik/Sicherheitstechnik</li>
+      <li>Waffentechnik</li>
+      <li>Boden-, Wasser- oder Luftfahrzeugtechnik</li>
+    </ul>
+  </li>
+  <li>Bei mindestens 1 Rang darfst du innerhalb von 10 Minuten behelfsmäßig reparieren.</li>
+</ul>
+
+<hr />
+
+<h4 class="cyber-h" id="aufrüstungskompetenz"><strong>Aufrüstungskompetenz</strong></h4>
+
+<blockquote>
+  <p>Verbessere bestehende Gegenstände auf vielfältige Weise.</p>
+</blockquote>
+
+<ul>
+  <li>Beispiele für Aufrüstungen:
+    <ul>
+      <li>Reduziere Menschlichkeitsverlust bei Cyberware</li>
+      <li>Erhöhe Slots für Optionen oder Programme</li>
+      <li>Verbessere Qualität oder Schaden</li>
+      <li>Füge neue Funktionen hinzu (z. B. versteckbare Waffen)</li>
+    </ul>
+  </li>
+</ul>
+
+<p><strong>Probe:</strong><br />
+<code class="language-plaintext highlighter-rouge">TECH + zugehörige Reparatur-Fertigkeit + Spezialisierung + 1W10</code></p>
+
+<hr />
+
+<h4 class="cyber-h" id="herstellungskompetenz"><strong>Herstellungskompetenz</strong></h4>
+
+<blockquote>
+  <p>Stelle Gegenstände aus Materialien und Ideen her.</p>
+</blockquote>
+
+<ul>
+  <li>Kaufe Materialien und kombiniere sie mit Tech-Wissen.</li>
+  <li>Preisstufe legt SG &amp; Zeit fest (siehe Tabelle unten).</li>
+  <li>Misslingt der Wurf: Materialverlust.</li>
+</ul>
+
+<p><strong>Probe:</strong><br />
+<code class="language-plaintext highlighter-rouge">TECH + Reparatur-Fertigkeit des Gegenstands + Spezialisierung + 1W10</code></p>
+
+<hr />
+
+<h4 class="cyber-h" id="erfindungskompetenz"><strong>Erfindungskompetenz</strong></h4>
+
+<blockquote>
+  <p>Erfinde völlig neue Gegenstände oder Aufrüstungen.</p>
+</blockquote>
+
+<ul>
+  <li>Du beschreibst die Funktion möglichst genau.</li>
+  <li>SL legt Preisstufe und SG fest.</li>
+  <li>Gilt wie Herstellung, nur mit mehr Kreativität.</li>
+</ul>
+
+<p><strong>Probe:</strong><br />
+<code class="language-plaintext highlighter-rouge">TECH + Reparatur-Fertigkeit der Erfindung oder des aufgerüsteten Objekts + Spezialisierung + 1W10</code></p>
+
+<hr />
+
+<h3 class="cyber-h" id="sg-tabelle-für-aufrüsten-herstellen--erfinden">SG-Tabelle für Aufrüsten, Herstellen &amp; Erfinden</h3>
+
+<table class="cyber-table ac-red" style="width: auto;">
+  <thead>
+    <tr>
+      <th>Preisstufe</th>
+      <th>SG</th>
+      <th>Zeit</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Billig/Alltäglich</td>
+      <td>9</td>
+      <td>1 Stunde</td>
+    </tr>
+    <tr>
+      <td>Teuer</td>
+      <td>13</td>
+      <td>6 Stunden</td>
+    </tr>
+    <tr>
+      <td>Premium</td>
+      <td>17</td>
+      <td>1 Tag</td>
+    </tr>
+    <tr>
+      <td>Kostspielig</td>
+      <td>21</td>
+      <td>1 Woche</td>
+    </tr>
+    <tr>
+      <td>Sehr Kostspielig</td>
+      <td>24</td>
+      <td>2 Wochen</td>
+    </tr>
+    <tr>
+      <td>Luxus</td>
+      <td>29</td>
+      <td>1 Monat</td>
+    </tr>
+    <tr>
+      <td>Superluxus</td>
+      <td>29</td>
+      <td>1 Monat / 10.000 Euro im Preis</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<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>
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/renovate.json
+++ b/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"
+  ]
+}
--- a/roles/index.html
+++ b/roles/index.html
@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Rollen - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a fg-yellow">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>roles</span>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Rollen</h1>
+<p>TBD</p>
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
--- a/sitemap.json
+++ b/sitemap.json
@ -0,0 +1,25 @@
+{
+  "pages": [
+    
+      { "url": "/cpred/attributes/" },
+    
+      { "url": "/cpred/characters/" },
+    
+      { "url": "/cpred/characters/chase" },
+    
+      { "url": "/cpred/characters/crash" },
+    
+      { "url": "/cpred/lifepaths/" },
+    
+      { "url": "/cpred/player-guides/netrunner" },
+    
+      { "url": "/cpred/player-guides" },
+    
+      { "url": "/cpred/roles/" },
+    
+      { "url": "/cpred/skills/" },
+    
+      { "url": "/cpred/player-guides/tech" }
+    
+  ]
+}
--- a/skills/index.html
+++ b/skills/index.html
@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Fertigkeiten - ThePhoenixDivision</title>
+
+<link rel="manifest" href="/cpred/assets/manifest.json">
+<meta name="theme-color" content="#ff003c">
+
+<!-- Stylesheets -->
+<link rel="stylesheet" href="/cpred/assets/css/normalize.css">
+<link rel="stylesheet" href="/cpred/assets/css/main.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="/cpred/assets/css/cyberpunk.css">
+
+</head>
+<body>
+  
+
+<header>
+  <div class="navbar-fixed">
+    <nav class="cyber-razor-bottom bg-black">
+      <div class="nav-wrapper">
+        <a href="/cpred/" class="cyberpunk-font-og f-x2-5">ThePhoenixDivision</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="/cpred/" class="cyber-a">Home</a></li>
+          
+            
+          
+            
+          
+            
+          
+            
+              <li><a href="/cpred/player-guides" class="cyber-a">Player Guides</a></li>
+            
+          
+            
+          
+            
+              <li><a href="/cpred/lifepaths/" class="cyber-a">Lebensweg</a></li>
+            
+          
+            
+              <li><a href="/cpred/characters/" class="cyber-a">Charaktere</a></li>
+            
+          
+            
+              <li><a href="/cpred/roles/" class="cyber-a">Rollen</a></li>
+            
+          
+            
+              <li><a href="/cpred/attributes/" class="cyber-a">Attribute</a></li>
+            
+          
+            
+              <li><a href="/cpred/skills/" class="cyber-a fg-yellow">Fertigkeiten</a></li>
+            
+          
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <!-- WIP: Breadcrumb
+  <div class="cyber-att">
+    <a href="/cpred/">Home</a>
+
+    
+    
+
+    
+      
+      
+
+      
+        › <span>skills</span>
+      
+    
+  </div>
+  -->
+</header>
+
+  <main class="container">
+    <h1 class="cyber-h">Fertigkeiten</h1>
+<p>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.</p>
+
+<div id="skill-overview">
+
+</div>
+<script>
+  fetch("/cpred/assets/game-data/skills.json")
+    .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>
+
+
+
+  </main>
+  <footer class="cyber-razor-top bg-black">
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 bg-dark"><a href="/cpred/" class="cyber-a"><i class="material-icons">home</i></a></li>
+    
+      
+    
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/player-guides" target="_self" class="cyber-a">
+            
+              <i class="material-icons">assist_walker</i>
+            
+          </a>
+        </li>
+      
+    
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/lifepaths/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">merge</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/characters/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">account_circle</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/roles/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">manage_accounts</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-dark">
+          <a href="/cpred/attributes/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+      
+        <li class="tab col s1 bg-red">
+          <a href="/cpred/skills/" target="_self" class="cyber-a">
+            
+              <i class="material-icons">fact_check</i>
+            
+          </a>
+        </li>
+      
+    
+  </ul>
+  <span></span>
+</footer>
+
+  <script src="/cpred/assets/js/materialize.min.js"></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("/cpred/assets/js/service-worker.js")
+        .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>
Author	SHA1	Message	Date
f.weber	398fb15aa7	jekyll build from Action 6a8bebbddb9d6b465a36e4554de4aa49fb213688	2025-05-10 21:42:49 +00:00
f.weber	9744d87f71	jekyll build from Action 3bae4ef3c4c0e7bd34ee1ffd418c5c12c1665d9d	2025-05-10 13:18:32 +00:00
f.weber	435f4ed884	jekyll build from Action 28fb8b918eae61efe1645db266cd609e8e4b5c80	2025-05-09 13:14:41 +00:00
f.weber	5a1fa63af0	jekyll build from Action 1e46bd764a1e2f3b0e8e3028f2959bfe6ae39f19	2025-05-06 10:39:49 +00:00
f.weber	7edfe51d9a	jekyll build from Action c7bb074b1d4a59737903c172335fe9aebe202655	2025-05-02 10:03:51 +00:00
f.weber	0678d59da4	jekyll build from Action 4585f11afee4ffdf94ebdd02857f6dbb32284993	2025-05-01 12:12:07 +00:00
f.weber	5bdb9dd702	jekyll build from Action 6a1ad782eaf80daa5c9f6cd442496aeb55630ece	2025-04-15 18:12:14 +00:00
f.weber	50e38cea48	jekyll build from Action e60bd96882764b335c41dae9b06e23acf59d8f00	2025-04-15 17:52:52 +00:00
f.weber	365b9eea83	jekyll build from Action d69b3f7cc51c352c78def6912715d0f8997c7065	2025-04-15 13:59:56 +00:00
f.weber	eb84ce8859	jekyll build from Action 1bafdf4cad8674e59ffc861caeeeb868ca4d4c64	2025-04-15 13:52:53 +00:00
f.weber	bea48bfe67	jekyll build from Action 09bb5a9aa27e58377d0e9b49a6c6b17f519a765d	2025-04-15 13:27:45 +00:00
f.weber	7494fc72d6	jekyll build from Action e7396d139f3ce52f59f9552903eb07a6e12ba010	2025-04-15 09:14:06 +00:00
f.weber	b26b066ca3	jekyll build from Action 63f1a3ea878d3583acee0c59e1071831a1a55d34	2025-04-12 20:26:51 +00:00
f.weber	6b5f903728	jekyll build from Action 9fb96a5a2b5bd7584ed2bbd154979ef49de0c361	2025-04-12 20:18:51 +00:00
f.weber	008e9bb874	jekyll build from Action f54e0b7c7446a3bc9c3ef066c9d5d916feb1090a	2025-04-11 22:55:51 +00:00
f.weber	c98d9076f8	jekyll build from Action 99baeba494489aeb43e00c8700a1b5f8c2141f22	2025-04-11 22:47:47 +00:00
f.weber	d3e3578e50	jekyll build from Action 1cff1629ba88c77e96aefda905ecfd748eb0ea19	2025-04-11 14:06:06 +00:00
f.weber	984e756b2e	jekyll build from Action 832be0f0701f62759715ee89ac6f716ef1a5aaa8	2025-04-10 22:10:05 +00:00
f.weber	0c2d8ae4df	jekyll build from Action a1b44a61abebc44cafb6a278f1e1e91610a2d805	2025-04-08 11:10:45 +00:00
f.weber	4730502138	jekyll build from Action 5d2641370c46caf88ff9c3567f7487508b7282b7	2025-03-20 15:40:38 +00:00
f.weber	0de1cf6381	jekyll build from Action ba3804df2220de6cb62cb498552f311d4d67f9f7	2025-03-20 15:21:25 +00:00
f.weber	b652c4cb45	jekyll build from Action 40ff7f5be70ef594ee1988e79ccc9b6e546c8c57	2025-03-20 15:04:42 +00:00
f.weber	384e1e9f7a	jekyll build from Action 653b2d53e07b4efcb7cfcb6e1a906d6365b81710	2025-03-20 14:16:13 +00:00
f.weber	3ab4c51317	jekyll build from Action a83f2c39fd96581232b63cb06d82ee637c830ee4	2025-03-20 12:35:38 +00:00
f.weber	22f1135ac3	jekyll build from Action c518cbf5508bd75a54130f70cc1b75d2973d985f	2025-03-20 12:24:10 +00:00
f.weber	582b8c50c6	jekyll build from Action 344caf5b524fb78cc7faa1c8470caa44019fe2d7	2025-03-20 12:15:47 +00:00
f.weber	f03a764d90	jekyll build from Action 78570162433602d11134f6bc6204760b65f08235	2025-03-20 11:33:30 +00:00
f.weber	ad0b72a99a	jekyll build from Action ecf64c679fcd2c217ae821ef7b65d3520b269bfb	2025-03-20 10:46:34 +00:00
f.weber	24afdc22b7	jekyll build from Action f915dad90839b9a0b9f4222ca2539e70e1ab22d0	2025-03-20 08:35:13 +00:00
f.weber	1cf16b1f06	jekyll build from Action 448b6db79e03118c7086af7ec30fbfc613e5f1e9	2025-03-18 21:29:20 +00:00
f.weber	36c5813dd7	jekyll build from Action 7e5dae062056ab6427a26f01e6a29fec782dd260	2025-03-18 21:20:03 +00:00
f.weber	2c87d29b95	jekyll build from Action fae93a92deb412ad9071322c44d91dd47d53112b	2025-03-18 20:57:09 +00:00
f.weber	b87af1c72c	jekyll build from Action 20b46587eecb3cabcc7a31f99b605d62a9ccdbff	2025-03-17 17:51:45 +00:00
f.weber	0bba8da5c8	jekyll build from Action 72158d4464be12139633216de99889d37083b564	2025-03-16 23:54:47 +00:00
f.weber	f47661a637	jekyll build from Action 95fdd54d463090fbf8cc733c728ca25bf5c89d9d	2025-03-16 23:29:08 +00:00
Florian	dce32ab52c	Initialized pages branch	2025-03-17 00:05:28 +01:00
				`@ -0,0 +1 @@`
				<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="https://phoenixdivision.morlana.space/cpred/feed.xml" rel="self" type="application/atom+xml" /><link href="https://phoenixdivision.morlana.space/cpred/" rel="alternate" type="text/html" /><updated>2025-05-10T21:42:48+00:00</updated><id>https://phoenixdivision.morlana.space/cpred/feed.xml</id><title type="html">ThePhoenixDivision</title><subtitle>We will share our adventures in Cyberpunk Red here.</subtitle></feed>