diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..b6c5b56b4ae74e6326700c054f91435623184cd6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+
+<head>
+ <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
+</head>
+<div class="content">
+ <h1>Gamification in der Fertigung</h1>
+
+ <h2>Eignung von Spiel-Design-Elementen anhand von Kriterien</h2>
+ <p>
+ Wählen Sie alle oder ausgewählte Kriterien eines Hauptkriteriums aus. Unter Elemente können Sie sehen welche Spiel-Design-Elemente passend zu Ihren ausgewählten Kriterien geeignet sind.
+ Wählen Sie ein angezigtes Element aus, um unter Beispiele kurze Erklärungstexte und grafische Besipiele zu sehen.
+ </p>
+
+ <div class="grid-container1">
+
+ <!-- Column Main criteria Safety-->
+ <div>
+ <p>
+ <label><input id="h1" type="checkbox" onchange="toggleCriteria()"> </label> <span>Sicherheit</span>
+ </p>
+
+ <!-- Container criteria for main criterion Safety -->
+ <div id="CriteriaOneContainer">
+ <div>
+ <label><input id="criteria11" type="checkbox" class="criteria h1" onchange="criteriaOnChange1()"> </label> <span>Geringe bis keine Interaktion</span>
+ </div>
+
+ <div>
+ <label><input id="criteria12" type="checkbox" class="criteria h1" onchange="criteriaOnChange1()"> </label> <span>Ablenkung so gering wie möglich</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Column Main criteria Personality-->
+ <div>
+ <p>
+ <label><input id="h2" type="checkbox" onchange="toggleCriteria()"> </label> <span>Persönlichkeit</span>
+ </p>
+
+ <!-- Container criteria for main criterion Personlaity -->
+ <div id="CriteriaTwoContainer">
+ <div>
+ <label><input id="criteria21" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label> <span>Hohe Geduld und hohe Kompetitivität</span>
+ </div>
+
+ <div>
+ <label><input id="criteria22" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label> <span>Spielertyp: Achiever</span>
+ </div>
+
+ <div>
+ <label><input id="criteria23" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label> <span>Spielertyp: Explorer</span>
+ </div>
+
+ <div>
+ <label><input id="criteria24" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label> <span>Spielertyp: Socialiser</span>
+ </div>
+
+ <div>
+ <label><input id="criteria25" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label> <span>Spielertyp: Killer</span>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- Column Main criteria Motivation-->
+ <div>
+ <p>
+ <label><input id="h3" type="checkbox" onchange="toggleCriteria()"> </label> <span>Motivation</span>
+ </p>
+
+ <!-- Container criteria for main criterion Motivation -->
+ <div id="CriteriaThreeContainer">
+ <div>
+ <label><input id="criteria31" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> </label> <span>Förderung des Kompetenzerlebens</span>
+ </div>
+
+ <div>
+ <label><input id="criteria32" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> </label> <span>Förderung der Aufgabenbedeutsamkeit</span>
+ </div>
+
+ <div>
+ <label><input id="criteria33" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> </label> <span>Erleben sozialer Eingebundenheit</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Column Main criteria Generation-->
+ <div>
+ <p>
+ <label><input id="h4" type="checkbox" onchange="toggleCriteria()"> </label> <span>Generation</span>
+ </p>
+
+ <!-- Container criteria for main criterion Generation -->
+ <div id="CriteriaFourContainer">
+ <div>
+ <label><input id="criteria41" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> </label> <span>Generation X: 16 - 24 Jahre</span>
+ </div>
+
+ <div>
+ <label><input id="criteria42" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> </label> <span>Generation Y: 25 - 40 Jahre</span>
+ </div>
+
+ <div>
+ <label><input id="criteria43" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> </label> <span>Generation Z: über 40 Jahre</span>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- Grid Container Elements & Graph -->
+ <div class="grid-container-elementsandrgraph">
+
+ <!-- Container Elements Grid -->
+ <div class="container-grid-elements">
+ <!-- Grid Container Elements -->
+ <div class="grid-container2">
+
+ <!-- Points -->
+ <div class="progressbar" onclick="setActive(this,'points')">
+ <div class="outer">
+ <div class="inner">
+ <div class="number" id="number">
+ </div>
+ </div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+ <defs>
+ <linearGradient id="GradientColor1">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor1')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
+ </svg>
+
+ <p>
+ Punkte
+ </p>
+
+ </div>
+
+ <!-- Badges -->
+ <div class="progressbar" onclick="setActive(this, 'badge' )">
+ <div class="outer">
+ <div class="inner">
+ <div class="number" id="number">
+ </div>
+ </div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+ <defs>
+ <linearGradient id="GradientColor2">
+ <stop offset="0%" stop-color="#00fff7" />
+ <stop offset="100%" stop-color="#0011ff" />
+ </linearGradient>
+ </defs>
+ <circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor2')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
+ </svg>
+
+ <p>
+ Abzeichen
+ </p>
+
+ </div>
+
+ <!-- Progressbar -->
+ <div class="progressbar" onclick="setActive(this, 'progressBar' )">
+ <div class="outer">
+ <div class="inner">
+ <div class="number" id="number">
+ </div>
+ </div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+ <defs>
+ <linearGradient id="GradientColor3">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor3')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
+ </svg>
+
+ <p>
+ Fortschrittsanzeige
+ </p>
+
+ </div>
+
+ <!-- Leaderboards -->
+ <div class="progressbar" onclick="setActive(this, 'ranking' )">
+ <div class="outer">
+ <div class="inner">
+ <div class="number" id="number">
+ </div>
+ </div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+ <defs>
+ <linearGradient id="GradientColor4">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor4')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
+ </svg>
+
+ <p>
+ Bestenlisten
+ </p>
+
+ </div>
+
+ <!-- Level -->
+ <div class="progressbar" onclick="setActive(this, 'level' )">
+ <div class="outer">
+ <div class="inner">
+ <div class="number" id="number">
+ </div>
+ </div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+ <defs>
+ <linearGradient id="GradientColor5">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor5')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
+ </svg>
+
+ <p>
+ Level
+ </p>
+
+ </div>
+
+ <!-- Narrative -->
+ <div class="progressbar" onclick="setActive(this, 'narrativ' )">
+ <div class="outer">
+ <div class="inner">
+ <div class="number" id="number">
+ </div>
+ </div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+ <defs>
+ <linearGradient id="GradientColor6">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor6')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
+ </svg>
+
+ <p>
+ Narrativ
+ </p>
+
+ </div>
+
+ <!-- Avatar -->
+ <div class="progressbar" onclick="setActive(this, 'avatar' )">
+ <div class="outer">
+ <div class="inner">
+ <div class="number" id="number">
+ </div>
+ </div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+ <defs>
+ <linearGradient id="GradientColor7">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor7')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
+ </svg>
+
+ <p>
+ Avatar
+ </p>
+
+ </div>
+
+ <!-- NPC -->
+ <div class="progressbar" onclick="setActive(this,'nonPlayerCharacter')">
+ <div class="outer">
+ <div class="inner">
+ <div class="number" id="number">
+ </div>
+ </div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+ <defs>
+ <linearGradient id="GradientColor8">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor8')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
+ </svg>
+
+ <p>
+ Nicht-Spieler-Charaktere
+ </p>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="graph">
+ <p> Test </p>
+ <div>
+ <canvas id="myChart"></canvas>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- Container for Examples -->
+ <div class="examples">
+
+ <p>
+ Beispiele
+ </p>
+
+ <!-- SVG Progressbar -->
+ <div class="svgContainer" id="progressBar">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="658" height="140" viewBox="0 0 658 140">
+ <defs>
+ <clipPath id="clip-Fortschrittsanzeige">
+ <rect width="658" height="140" />
+ </clipPath>
+ </defs>
+ <g id="Fortschrittsanzeige" clip-path="url(#clip-Fortschrittsanzeige)">
+ <rect width="658" height="140" fill="none" />
+ <g id="Rechteck_1" data-name="Rechteck 1" transform="translate(17 41)" fill="#fff" stroke="#000" stroke-width="1">
+ <rect width="546" height="52" stroke="none" />
+ <rect x="0.5" y="0.5" width="545" height="51" fill="none" />
+ </g>
+ <g id="Rechteck_2" data-name="Rechteck 2" transform="translate(17 41)" stroke="#000" stroke-width="1">
+ <rect width="273" height="52" stroke="none" />
+ <rect x="0.5" y="0.5" width="272" height="51" fill="none" />
+ </g>
+ <text id="_50_" data-name="50 %" transform="translate(579 78)" font-size="27" font-family="SegoeUI, Segoe UI">
+ <tspan x="0" y="0">50 %</tspan>
+ </text>
+ </g>
+ </svg>
+ </div>
+
+ <!-- SVG Badge -->
+ <div class="svgContainer" id="badge">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="153" height="132" viewBox="0 0 153 132">
+ <defs>
+ <clipPath id="clip-Abzeichen">
+ <rect width="153" height="132" />
+ </clipPath>
+ </defs>
+ <g id="Abzeichen" clip-path="url(#clip-Abzeichen)">
+ <rect width="153" height="132" fill="none" />
+ <g id="Ellipse_1" data-name="Ellipse 1" transform="translate(23 13)" fill="#fff" stroke="#000" stroke-width="3">
+ <circle cx="53.5" cy="53.5" r="53.5" stroke="none" />
+ <circle cx="53.5" cy="53.5" r="52" fill="none" />
+ </g>
+ <path id="Icon_material-star" data-name="Icon material-star" d="M32.482,48.019l18.22,11L45.867,38.29l16.1-13.945-21.2-1.8L32.482,3,24.2,22.547,3,24.345,19.1,38.29,14.262,59.016Z" transform="translate(44.018 35.492)" />
+ </g>
+ </svg>
+ </div>
+
+ <!-- SVG Avatar -->
+ <div class="svgContainer" id="avatar">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="205" height="139" viewBox="0 0 205 139">
+ <defs>
+ <clipPath id="clip-Avatar">
+ <rect width="205" height="139" />
+ </clipPath>
+ </defs>
+ <g id="Avatar" clip-path="url(#clip-Avatar)">
+ <rect width="205" height="139" fill="none" />
+ <g id="Icon_ionic-md-man" data-name="Icon ionic-md-man" transform="translate(8.906 18.75)">
+ <path id="Pfad_1" data-name="Pfad 1" d="M23.536,18.567a8.158,8.158,0,1,0-8.158-8.158A8.131,8.131,0,0,0,23.536,18.567Z" transform="translate(6.931)" />
+ <path id="Pfad_2" data-name="Pfad 2" d="M38.647,8.086H22.286c-6.168,0-10.193,5.424-10.193,10.586V43.519a3.4,3.4,0,1,0,6.78,0V20.553h1.312V83.021c0,6.649,9.186,6.431,9.405,0v-36h1.75V83.043c.372,6.824,9.405,6.168,9.405-.022V20.553H41.84V43.519a3.5,3.5,0,1,0,7,0V18.672C48.84,13.532,44.793,8.086,38.647,8.086Z" transform="translate(0 12.318)" />
+ </g>
+ <path id="Icon_awesome-eye" data-name="Icon awesome-eye" d="M31.606,14.293A17.707,17.707,0,0,0,15.9,4.5,17.709,17.709,0,0,0,.192,14.294a1.786,1.786,0,0,0,0,1.611A17.707,17.707,0,0,0,15.9,25.7,17.709,17.709,0,0,0,31.606,15.9,1.786,1.786,0,0,0,31.606,14.293ZM15.9,23.049a7.95,7.95,0,1,1,7.95-7.95A7.95,7.95,0,0,1,15.9,23.049ZM15.9,9.8a5.262,5.262,0,0,0-1.4.209A2.642,2.642,0,0,1,10.809,13.7,5.288,5.288,0,1,0,15.9,9.8Z" transform="translate(87.102 23.666)" />
+ <path id="Icon_ionic-ios-color-palette" data-name="Icon ionic-ios-color-palette" d="M30.241,24.462a3.284,3.284,0,0,0-1.73-.633,2.574,2.574,0,0,1-1.589-.7,1.949,1.949,0,0,1,0-3.08l2.13-1.891a6.846,6.846,0,0,0,0-10.491A13.518,13.518,0,0,0,20.067,4.5,17,17,0,0,0,8.9,8.726,12.319,12.319,0,0,0,8.9,27.6a16.462,16.462,0,0,0,10.751,3.9h.12a15.824,15.824,0,0,0,10.462-3.684A2.374,2.374,0,0,0,30.241,24.462Zm-21.8-9.274a2.25,2.25,0,1,1,2.25,2.25A2.248,2.248,0,0,1,8.438,15.188Zm2.813,8.859A2.25,2.25,0,1,1,13.5,21.8,2.248,2.248,0,0,1,11.25,24.047Zm4.5-11.32A2.25,2.25,0,1,1,18,10.477,2.248,2.248,0,0,1,15.75,12.727Zm5.063,15.4a3.375,3.375,0,1,1,3.375-3.375A3.376,3.376,0,0,1,20.813,28.125ZM22.5,13.5a2.25,2.25,0,1,1,2.25-2.25A2.248,2.248,0,0,1,22.5,13.5Z" transform="translate(85.002 50.666)" />
+ <g id="Icon_ionic-md-woman" data-name="Icon ionic-md-woman" transform="translate(134.604 18.757)">
+ <path id="Pfad_3" data-name="Pfad 3" d="M18.36,15.709,11.475,39.371c-1.475,5.173,4.847,7.192,6.393,2.337l6.159-21.824h1.733L15.175,58.223h9.882V87.035a3.75,3.75,0,1,0,7.493,0V58.223h2.342V87.035a3.64,3.64,0,1,0,7.259,0V58.223H52.314L41.5,19.883h1.967l6.159,21.824c1.522,4.968,7.8,2.836,6.393-2.314L49.129,15.709c-.937-2.677-4.262-7.4-9.835-7.623H28.218A11.091,11.091,0,0,0,18.36,15.709Z" transform="translate(0 11.795)" />
+ <path id="Pfad_4" data-name="Pfad 4" d="M30.963,10.16a7.77,7.77,0,1,0-15.536,0,7.77,7.77,0,1,0,15.536,0Z" transform="translate(10.525)" />
+ </g>
+ <path id="Icon_awesome-glasses" data-name="Icon awesome-glasses" d="M33.788,16.868,31.119,6.173a5.176,5.176,0,0,0-6.662-3.657l-.9.3a.941.941,0,0,0-.6,1.191l.3.893a.941.941,0,0,0,1.191.6l.776-.258a2.517,2.517,0,0,1,1.952.1,2.332,2.332,0,0,1,1.2,1.52l2.264,9.053a16.288,16.288,0,0,0-4.779-.733A15.437,15.437,0,0,0,19.1,16.752H14.8a15.423,15.423,0,0,0-6.76-1.574,16.289,16.289,0,0,0-4.78.733L5.521,6.857a2.33,2.33,0,0,1,1.2-1.519,2.515,2.515,0,0,1,1.951-.1l.775.258a.941.941,0,0,0,1.191-.6l.3-.893a.941.941,0,0,0-.6-1.191l-.9-.3A5.176,5.176,0,0,0,2.78,6.172L.112,16.868A3.78,3.78,0,0,0,0,17.779v4.135a6.742,6.742,0,0,0,6.78,6.7H8.965a6.749,6.749,0,0,0,6.761-6.2l.172-2.274H18l.172,2.274a6.748,6.748,0,0,0,6.761,6.2H27.12a6.742,6.742,0,0,0,6.78-6.7V17.78A3.781,3.781,0,0,0,33.788,16.868ZM11.97,22.13a3,3,0,0,1-3.005,2.72H6.78a2.979,2.979,0,0,1-3.013-2.936V19.7a12.776,12.776,0,0,1,4.272-.76,11.547,11.547,0,0,1,4.116.76Zm18.164-.216A2.978,2.978,0,0,1,27.12,24.85H24.935a2.994,2.994,0,0,1-3.005-2.72L21.746,19.7a11.551,11.551,0,0,1,4.117-.76,12.775,12.775,0,0,1,4.27.761v2.209Z" transform="translate(87.102 85.717)" />
+ </g>
+ </svg>
+ </div>
+
+ <!-- SVG Leaderboard -->
+ <div class="svgContainer" id="ranking">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="301" height="243" viewBox="0 0 301 243">
+ <defs>
+ <clipPath id="clip-Bestenlisten">
+ <rect width="301" height="243" />
+ </clipPath>
+ </defs>
+ <g id="Bestenlisten" clip-path="url(#clip-Bestenlisten)">
+ <rect width="301" height="243" fill="none" />
+ <rect id="Rechteck_3" data-name="Rechteck 3" width="254" height="38" transform="translate(23 23)" fill="#e5e5e5" />
+ <rect id="Rechteck_4" data-name="Rechteck 4" width="254" height="38" transform="translate(23 61)" fill="#fff" />
+ <rect id="Rechteck_5" data-name="Rechteck 5" width="254" height="38" transform="translate(23 99)" fill="#e5e5e5" />
+ <rect id="Rechteck_6" data-name="Rechteck 6" width="254" height="38" transform="translate(23 137)" fill="#fff" />
+ <rect id="Rechteck_7" data-name="Rechteck 7" width="254" height="38" transform="translate(23 175)" fill="#e5e5e5" />
+ <text id="_..." data-name="..." transform="translate(28 53)" font-size="27" font-family="SegoeUI, Segoe UI">
+ <tspan x="0" y="0">...</tspan>
+ </text>
+ <text id="_7_Erika_Müller" data-name="7 Erika Müller" transform="translate(28 91)" font-size="27" font-family="SegoeUI, Segoe UI">
+ <tspan x="0" y="0">7 Erika Müller</tspan>
+ </text>
+ <text id="_8_Max_Schmidt" data-name="8 Max Schmidt" transform="translate(28 129)" font-size="27" font-family="SegoeUI, Segoe UI">
+ <tspan x="0" y="0">8 Max Schmidt</tspan>
+ </text>
+ <text id="_9_Lisa_Fischer" data-name="9 Lisa Fischer" transform="translate(28 167)" font-size="27" font-family="SegoeUI, Segoe UI">
+ <tspan x="0" y="0">9 Lisa Fischer</tspan>
+ </text>
+ <text id="_...-2" data-name="..." transform="translate(28 205)" font-size="27" font-family="SegoeUI, Segoe UI">
+ <tspan x="0" y="0">...</tspan>
+ </text>
+ </g>
+ </svg>
+ </div>
+ <div class="svgContainer" id="level">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="119" height="64" viewBox="0 0 119 64">
+ <defs>
+ <clipPath id="clip-Level">
+ <rect width="119" height="64" />
+ </clipPath>
+ </defs>
+ <g id="Level" clip-path="url(#clip-Level)">
+ <rect width="119" height="64" fill="none" />
+ <text id="Level_5" data-name="Level 5" transform="translate(19 45)" font-size="27" font-family="SegoeUI, Segoe UI">
+ <tspan x="0" y="0">Level 5</tspan>
+ </text>
+ </g>
+ </svg>
+ </div>
+
+ <!-- SVG NPC -->
+ <div class="svgContainer" id="nonPlayerCharacter">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="91" height="132" viewBox="0 0 91 132">
+ <defs>
+ <clipPath id="clip-Nicht-Spieler-Charaktere">
+ <rect width="91" height="132" />
+ </clipPath>
+ </defs>
+ <g id="Nicht-Spieler-Charaktere" clip-path="url(#clip-Nicht-Spieler-Charaktere)">
+ <rect width="91" height="132" fill="none" />
+ <g id="Icon_ionic-md-man" data-name="Icon ionic-md-man" transform="translate(14.906 17.75)">
+ <path id="Pfad_1" data-name="Pfad 1" d="M23.536,18.567a8.158,8.158,0,1,0-8.158-8.158A8.131,8.131,0,0,0,23.536,18.567Z" transform="translate(6.931)" />
+ <path id="Pfad_2" data-name="Pfad 2" d="M38.647,8.086H22.286c-6.168,0-10.193,5.424-10.193,10.586V43.519a3.4,3.4,0,1,0,6.78,0V20.553h1.312V83.021c0,6.649,9.186,6.431,9.405,0v-36h1.75V83.043c.372,6.824,9.405,6.168,9.405-.022V20.553H41.84V43.519a3.5,3.5,0,1,0,7,0V18.672C48.84,13.532,44.793,8.086,38.647,8.086Z" transform="translate(0 12.318)" />
+ </g>
+ </g>
+ </svg>
+ </div>
+
+ <!-- SVG Points -->
+ <div class="svgContainer" id="points">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="162" height="66" viewBox="0 0 162 66">
+ <defs>
+ <clipPath id="clip-Punkte">
+ <rect width="162" height="66" />
+ </clipPath>
+ </defs>
+ <g id="Punkte" clip-path="url(#clip-Punkte)">
+ <rect width="162" height="66" fill="#fff" />
+ <text id="_125_Punkte" data-name="125 Punkte" transform="translate(15 44)" font-size="27" font-family="SegoeUI, Segoe UI">
+ <tspan x="0" y="0">125 Punkte</tspan>
+ </text>
+ </g>
+ </svg>
+ </div>
+
+ <!-- SVG Narrativ -->
+ <div class="svgContainer" id="narrativ">
+ </div>
+
+ </div>
\ No newline at end of file