{"id":2,"date":"2026-09-22T12:04:36","date_gmt":"2026-09-22T12:04:36","guid":{"rendered":"https:\/\/alleswaskunstist.de\/?page_id=2"},"modified":"2026-09-22T12:40:09","modified_gmt":"2026-09-22T12:40:09","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/alleswaskunstist.de\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cbe2b16 e-con e-atomic-element e-flexbox-base e-696a411 \" data-id=\"cbe2b16\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cbe2b16\">\n    \t\t<div class=\"elementor-element elementor-element-32b8e59 elementor-widget elementor-widget-html\" data-id=\"32b8e59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  Game Designer Portfolio \u2014 Elementor HTML-Widget (All-in-One)\n  In Elementor: HTML-Widget \u2192 gesamten Inhalt von elementor.html einf\u00fcgen.\n  Empfehlung: volle Breite, Seite ohne Theme-Header (Canvas \/ Full Width).\n  Platzhalter-Texte ersetzen. PDF-Links (#) durch echte URLs austauschen.\n  Neu generieren: python _build_elementor.py\n-->\n<style>\n\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300;400;600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap\");\n\n\/* Elementor \/ Theme isolation *\/\n#gdp {\n  width: 100% !important;\n  max-width: 100% !important;\n  margin: 0 !important;\n  isolation: isolate;\n  color-scheme: dark;\n  scroll-padding-top: 6rem;\n}\n#gdp *,\n#gdp *::before,\n#gdp *::after {\n  box-sizing: border-box;\n}\n#gdp img {\n  border: 0;\n  box-shadow: none;\n}\n#gdp .site-header {\n  left: 0;\n  right: 0;\n}\nhtml {\n  scroll-behavior: smooth;\n}\n\n\/* =========================================================\n   Game Designer Portfolio \u2014 Stylesheet\n   Struktur: Tokens \u00b7 Basis \u00b7 Layout \u00b7 Header \u00b7 Hero \u00b7\n             Sektionen \u00b7 Arbeiten \u00b7 CV \u00b7 Kreativraum \u00b7\n             Kontakt \u00b7 Lightbox \u00b7 Animation \u00b7 Responsive\n   ========================================================= *\/\n\n\/* ---------- Tokens ---------- *\/\n#gdp {\n  --ink-900: #0b0d12;\n  --ink-800: #11141b;\n  --ink-700: #171b24;\n  --ink-600: #1f2430;\n  --line: rgba(255, 255, 255, 0.09);\n  --line-strong: rgba(255, 255, 255, 0.18);\n\n  --text: #e8e6e1;\n  --text-muted: #a2a5ad;\n  --text-dim: #737681;\n\n  --accent: #c9a86a;\n  --accent-soft: rgba(201, 168, 106, 0.14);\n  --accent-line: rgba(201, 168, 106, 0.4);\n\n  --font-display: \"Cormorant Garamond\", Georgia, serif;\n  --font-body: \"Inter\", -apple-system, \"Segoe UI\", sans-serif;\n  --font-mono: \"JetBrains Mono\", ui-monospace, monospace;\n\n  --container: 1180px;\n  --gutter: 2rem;\n  --radius: 4px;\n  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n\/* ---------- Basis ---------- *\/\n#gdp *,\n#gdp *::before,\n#gdp *::after { box-sizing: border-box; }\n\n#gdp {\n  scroll-behavior: smooth;\n  scroll-padding-top: 6rem;\n  -webkit-text-size-adjust: 100%;\n}\n\n#gdp {\n  margin: 0;\n  background: var(--ink-900);\n  color: var(--text);\n  font-family: var(--font-body);\n  font-size: 1rem;\n  font-weight: 300;\n  line-height: 1.75;\n  letter-spacing: 0.01em;\n  -webkit-font-smoothing: antialiased;\n}\n\n#gdp img {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n#gdp a {\n  color: inherit;\n  text-decoration: none;\n}\n\n#gdp h1,\n#gdp h2,\n#gdp h3,\n#gdp h4,\n#gdp h5 {\n  font-family: var(--font-display);\n  font-weight: 400;\n  line-height: 1.15;\n  margin: 0;\n  letter-spacing: 0.005em;\n}\n\n#gdp p { margin: 0 0 1.1em; }\n\n#gdp ul,\n#gdp ol {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n#gdp ::selection {\n  background: var(--accent);\n  color: var(--ink-900);\n}\n\n#gdp :focus-visible {\n  outline: 1px solid var(--accent);\n  outline-offset: 3px;\n}\n\n\/* ---------- Layout ---------- *\/\n#gdp .container {\n  width: 100%;\n  max-width: var(--container);\n  margin-inline: auto;\n  padding-inline: var(--gutter);\n}\n\n#gdp .section {\n  position: relative;\n  padding: clamp(5rem, 11vh, 9rem) 0;\n  border-top: 1px solid var(--line);\n}\n\n#gdp .section-alt { background: var(--ink-800); }\n\n#gdp .section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }\n\n#gdp .section-index {\n  display: block;\n  font-family: var(--font-mono);\n  font-size: 0.7rem;\n  letter-spacing: 0.28em;\n  color: var(--accent);\n  margin-bottom: 1.1rem;\n}\n\n#gdp .section-title {\n  font-size: clamp(2.1rem, 5vw, 3.4rem);\n  margin-bottom: 0.7rem;\n}\n\n#gdp .section-sub {\n  max-width: 52ch;\n  color: var(--text-muted);\n  margin: 0;\n}\n\n#gdp .section-head.center {\n  text-align: center;\n}\n\n#gdp .section-head.center .section-sub {\n  margin-inline: auto;\n}\n\n\/* Zwischen-\u00dcberschriften innerhalb einer Sektion *\/\n#gdp .block-heading {\n  margin: clamp(3.5rem, 8vw, 5.5rem) 0 1.8rem;\n  padding-top: 2.2rem;\n  border-top: 1px solid var(--line);\n  font-size: clamp(1.5rem, 3vw, 2rem);\n}\n\n#gdp .block-intro {\n  max-width: 56ch;\n  margin-top: -0.6rem;\n  margin-bottom: 2.2rem;\n  color: var(--text-muted);\n}\n\n#gdp .eyebrow {\n  font-family: var(--font-mono);\n  font-size: 0.7rem;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: var(--accent);\n  margin-bottom: 1.6rem;\n}\n\n\/* ---------- Header ---------- *\/\n#gdp .site-header {\n  position: fixed;\n  inset: 0 0 auto 0;\n  z-index: 100;\n  background: rgba(11, 13, 18, 0);\n  border-bottom: 1px solid transparent;\n  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),\n              backdrop-filter 0.4s var(--ease);\n}\n\n#gdp .site-header.is-stuck {\n  background: rgba(11, 13, 18, 0.86);\n  backdrop-filter: blur(14px);\n  border-bottom-color: var(--line);\n}\n\n#gdp .header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 2rem;\n  min-height: 5rem;\n}\n\n#gdp .brand {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.85rem;\n}\n\n#gdp .brand-mark {\n  display: grid;\n  place-items: center;\n  width: 2.1rem;\n  height: 2.1rem;\n  border: 1px solid var(--accent-line);\n  color: var(--accent);\n  font-family: var(--font-mono);\n  font-size: 0.72rem;\n  letter-spacing: 0.06em;\n}\n\n#gdp .brand-text {\n  font-family: var(--font-display);\n  font-size: 1.08rem;\n  letter-spacing: 0.06em;\n}\n\n#gdp .nav {\n  display: flex;\n  align-items: center;\n  gap: 2.1rem;\n  font-size: 0.86rem;\n  letter-spacing: 0.05em;\n}\n\n#gdp .nav a {\n  position: relative;\n  color: var(--text-muted);\n  padding: 0.35rem 0;\n  transition: color 0.25s var(--ease);\n}\n\n#gdp .nav a::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 1px;\n  background: var(--accent);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.35s var(--ease);\n}\n\n#gdp .nav a:hover,\n#gdp .nav a.is-active { color: var(--text); }\n\n#gdp .nav a:hover::after,\n#gdp .nav a.is-active::after { transform: scaleX(1); }\n\n#gdp .nav .nav-cta {\n  border: 1px solid var(--line-strong);\n  padding: 0.5rem 1.2rem;\n  color: var(--text);\n}\n\n#gdp .nav .nav-cta::after { display: none; }\n\n#gdp .nav .nav-cta:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n#gdp .nav-toggle {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  gap: 5px;\n  width: 2.6rem;\n  height: 2.6rem;\n  padding: 0;\n  background: none;\n  border: 1px solid var(--line);\n  cursor: pointer;\n}\n\n#gdp .nav-toggle span {\n  display: block;\n  width: 1.1rem;\n  height: 1px;\n  margin-inline: auto;\n  background: var(--text);\n  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);\n}\n\n#gdp .nav-toggle[aria-expanded=\"true\"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }\n#gdp .nav-toggle[aria-expanded=\"true\"] span:nth-child(2) { opacity: 0; }\n#gdp .nav-toggle[aria-expanded=\"true\"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }\n\n#gdp .scroll-progress {\n  height: 1px;\n  width: 0;\n  background: var(--accent);\n  transition: width 0.1s linear;\n}\n\n\/* ---------- Hero ---------- *\/\n#gdp .hero {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 100svh;\n  padding: 8rem 0 6rem;\n  overflow: hidden;\n}\n\n#gdp .hero-glow {\n  position: absolute;\n  top: -25%;\n  left: 50%;\n  width: min(1100px, 120vw);\n  aspect-ratio: 1;\n  transform: translateX(-50%);\n  background: radial-gradient(circle at 50% 50%,\n    rgba(201, 168, 106, 0.12) 0%,\n    rgba(201, 168, 106, 0.04) 38%,\n    transparent 68%);\n  pointer-events: none;\n}\n\n#gdp .hero-inner {\n  position: relative;\n  max-width: 60rem;\n}\n\n#gdp .hero-title {\n  font-size: clamp(2.8rem, 8.5vw, 6rem);\n  line-height: 1.04;\n  margin-bottom: 1.8rem;\n}\n\n#gdp .hero-title em {\n  font-style: italic;\n  color: var(--accent);\n}\n\n#gdp .hero-lead {\n  max-width: 48ch;\n  font-size: clamp(1rem, 1.6vw, 1.15rem);\n  color: var(--text-muted);\n  margin-bottom: 2.6rem;\n}\n\n#gdp .hero-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 4rem;\n}\n\n#gdp .btn {\n  display: inline-block;\n  padding: 0.95rem 2.1rem;\n  font-size: 0.85rem;\n  letter-spacing: 0.11em;\n  text-transform: uppercase;\n  border: 1px solid transparent;\n  transition: background 0.3s var(--ease), color 0.3s var(--ease),\n              border-color 0.3s var(--ease), transform 0.3s var(--ease);\n}\n\n#gdp .btn-primary {\n  background: var(--accent);\n  color: var(--ink-900);\n  font-weight: 500;\n}\n\n#gdp .btn-primary:hover {\n  background: transparent;\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n#gdp .btn-ghost {\n  border-color: var(--line-strong);\n  color: var(--text);\n}\n\n#gdp .btn-ghost:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n#gdp .hero-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2.5rem 3.5rem;\n  padding-top: 2rem;\n  border-top: 1px solid var(--line);\n}\n\n#gdp .hero-meta li {\n  font-size: 0.92rem;\n  color: var(--text);\n}\n\n#gdp .hero-meta span {\n  display: block;\n  font-family: var(--font-mono);\n  font-size: 0.65rem;\n  letter-spacing: 0.24em;\n  text-transform: uppercase;\n  color: var(--text-dim);\n  margin-bottom: 0.4rem;\n}\n\n#gdp .hero-meta a {\n  color: var(--accent);\n  border-bottom: 1px solid transparent;\n  transition: border-color 0.25s var(--ease);\n}\n\n#gdp .hero-meta a:hover { border-bottom-color: var(--accent); }\n\n\/* ---------- Ausgew\u00e4hlte Arbeiten (Featured) ---------- *\/\n#gdp .featured {\n  padding: clamp(3.5rem, 8vh, 5.5rem) 0;\n  border-top: 1px solid var(--line);\n}\n\n#gdp .featured-title {\n  font-size: clamp(1.5rem, 3vw, 2.1rem);\n  margin-bottom: 2rem;\n}\n\n#gdp .featured-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 1rem;\n}\n\n#gdp .featured-item {\n  position: relative;\n  display: block;\n  overflow: hidden;\n  border: 1px solid var(--line);\n  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);\n}\n\n#gdp .featured-item:hover {\n  border-color: var(--accent-line);\n  transform: translateY(-3px);\n}\n\n#gdp .featured-item img {\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  object-fit: cover;\n  filter: brightness(0.72);\n  transition: transform 0.8s var(--ease), filter 0.5s var(--ease);\n}\n\n#gdp .featured-item:hover img {\n  transform: scale(1.05);\n  filter: brightness(0.45);\n}\n\n#gdp .featured-label {\n  position: absolute;\n  inset: auto 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  padding: 1.1rem 1.2rem;\n  background: linear-gradient(180deg, transparent, rgba(11, 13, 18, 0.92));\n}\n\n#gdp .featured-label strong {\n  font-family: var(--font-display);\n  font-size: 1.2rem;\n  font-weight: 400;\n}\n\n#gdp .featured-label small {\n  font-family: var(--font-mono);\n  font-size: 0.64rem;\n  letter-spacing: 0.14em;\n  color: var(--accent);\n}\n\n#gdp .scroll-hint {\n  position: absolute;\n  left: 50%;\n  bottom: 2.2rem;\n  transform: translateX(-50%);\n  width: 1px;\n  height: 3.5rem;\n  background: var(--line-strong);\n  overflow: hidden;\n}\n\n#gdp .scroll-hint span {\n  position: absolute;\n  inset: 0 auto auto 0;\n  width: 1px;\n  height: 40%;\n  background: var(--accent);\n  animation: scrollDown 2.4s var(--ease) infinite;\n}\n\n@keyframes scrollDown {\n  0%   { transform: translateY(-100%); }\n  100% { transform: translateY(250%); }\n}\n\n\/* ---------- \u00dcber mich ---------- *\/\n#gdp .about-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);\n  gap: clamp(2.5rem, 6vw, 5rem);\n  align-items: start;\n}\n\n#gdp .portrait-frame {\n  position: relative;\n  border: 1px solid var(--line);\n  overflow: hidden;\n}\n\n#gdp .portrait-frame::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(180deg, transparent 55%, rgba(11, 13, 18, 0.5) 100%);\n  pointer-events: none;\n}\n\n#gdp .portrait-frame img {\n  width: 100%;\n  aspect-ratio: 4 \/ 5;\n  object-fit: cover;\n  filter: grayscale(0.25) contrast(1.03);\n  transition: filter 0.6s var(--ease), transform 0.9s var(--ease);\n}\n\n#gdp .about-portrait:hover .portrait-frame img {\n  filter: grayscale(0);\n  transform: scale(1.02);\n}\n\n#gdp .portrait-caption {\n  margin-top: 1rem;\n  font-family: var(--font-mono);\n  font-size: 0.7rem;\n  letter-spacing: 0.14em;\n  color: var(--text-dim);\n}\n\n#gdp .about-text .lead {\n  font-family: var(--font-display);\n  font-size: clamp(1.3rem, 2.6vw, 1.7rem);\n  line-height: 1.45;\n  color: var(--text);\n  margin-bottom: 1.6rem;\n}\n\n#gdp .about-text p { color: var(--text-muted); }\n\n#gdp .about-repo {\n  padding: 1.1rem 1.3rem;\n  border-left: 1px solid var(--accent-line);\n  background: var(--accent-soft);\n  font-size: 0.92rem;\n}\n\n#gdp .about-repo a {\n  color: var(--accent);\n  border-bottom: 1px solid var(--accent-line);\n}\n\n#gdp .about-repo a:hover { border-bottom-color: var(--accent); }\n\n#gdp .skills {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 2rem;\n  margin-top: 3rem;\n  padding-top: 2.5rem;\n  border-top: 1px solid var(--line);\n}\n\n#gdp .skill-block h3 {\n  font-family: var(--font-mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--accent);\n  margin-bottom: 1.1rem;\n}\n\n#gdp .tag-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n#gdp .tag-list li {\n  padding: 0.35rem 0.8rem;\n  border: 1px solid var(--line);\n  font-size: 0.78rem;\n  color: var(--text-muted);\n  letter-spacing: 0.03em;\n}\n\n#gdp .tag-list.small li {\n  padding: 0.2rem 0.6rem;\n  font-size: 0.7rem;\n}\n\n\/* ---------- Arbeiten ---------- *\/\n#gdp .filter-bar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.6rem;\n  margin-bottom: 3rem;\n}\n\n#gdp .filter {\n  padding: 0.5rem 1.2rem;\n  background: none;\n  border: 1px solid var(--line);\n  color: var(--text-muted);\n  font-family: var(--font-body);\n  font-size: 0.78rem;\n  letter-spacing: 0.08em;\n  cursor: pointer;\n  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),\n              background 0.25s var(--ease);\n}\n\n#gdp .filter:hover {\n  color: var(--text);\n  border-color: var(--line-strong);\n}\n\n#gdp .filter.is-active {\n  background: var(--accent-soft);\n  border-color: var(--accent-line);\n  color: var(--accent);\n}\n\n#gdp .work-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  gap: 1.6rem;\n}\n\n#gdp .work-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--ink-700);\n  border: 1px solid var(--line);\n  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),\n              box-shadow 0.45s var(--ease);\n}\n\n#gdp .work-card:hover {\n  transform: translateY(-4px);\n  border-color: var(--accent-line);\n  box-shadow: 0 22px 45px -30px rgba(0, 0, 0, 0.9);\n}\n\n#gdp .work-card.is-hidden { display: none; }\n\n#gdp .work-thumb {\n  position: relative;\n  overflow: hidden;\n  border-bottom: 1px solid var(--line);\n}\n\n#gdp .work-thumb img {\n  width: 100%;\n  aspect-ratio: 16 \/ 10;\n  object-fit: cover;\n  transition: transform 0.7s var(--ease);\n}\n\n#gdp .work-card:hover .work-thumb img { transform: scale(1.045); }\n\n#gdp .work-badge {\n  position: absolute;\n  top: 0.9rem;\n  left: 0.9rem;\n  padding: 0.25rem 0.7rem;\n  background: rgba(11, 13, 18, 0.82);\n  border: 1px solid var(--accent-line);\n  color: var(--accent);\n  font-family: var(--font-mono);\n  font-size: 0.62rem;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n}\n\n#gdp .work-body {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: 1.6rem 1.6rem 1.4rem;\n}\n\n#gdp .work-body h3 {\n  font-size: 1.5rem;\n  margin-bottom: 0.35rem;\n}\n\n#gdp .work-role {\n  font-family: var(--font-mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.1em;\n  color: var(--text-dim);\n  margin-bottom: 1rem;\n}\n\n#gdp .work-desc {\n  font-size: 0.92rem;\n  color: var(--text-muted);\n  margin-bottom: 1.2rem;\n}\n\n#gdp .work-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.4rem 1.4rem;\n  margin-top: auto;\n  padding-top: 1.2rem;\n  border-top: 1px solid var(--line);\n}\n\n#gdp .work-links a {\n  font-size: 0.82rem;\n  letter-spacing: 0.04em;\n  color: var(--accent);\n  border-bottom: 1px solid transparent;\n  transition: border-color 0.25s var(--ease);\n}\n\n#gdp .work-links a:hover { border-bottom-color: var(--accent); }\n\n#gdp .work-body .tag-list { margin-bottom: 0.4rem; }\n\n#gdp .work-note {\n  margin-top: 2.5rem;\n  font-size: 0.88rem;\n  color: var(--text-dim);\n}\n\n#gdp .work-note a {\n  color: var(--text-muted);\n  border-bottom: 1px solid var(--line-strong);\n}\n\n#gdp .work-note a:hover { color: var(--accent); }\n\n\/* ---------- Resume ---------- *\/\n#gdp .pdf-box {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1.5rem 2.5rem;\n  padding: 1.8rem 2rem;\n  background: var(--ink-700);\n  border: 1px solid var(--line);\n  border-left: 2px solid var(--accent);\n}\n\n#gdp .pdf-box h3 {\n  font-size: 1.35rem;\n  margin-bottom: 0.35rem;\n}\n\n#gdp .pdf-box p {\n  max-width: 52ch;\n  margin: 0;\n  font-size: 0.92rem;\n  color: var(--text-muted);\n}\n\n#gdp .cv-layout {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n  gap: clamp(2.5rem, 6vw, 4.5rem);\n}\n\n#gdp .cv-heading {\n  font-family: var(--font-mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--accent);\n  margin-bottom: 2.2rem;\n}\n\n#gdp .timeline {\n  position: relative;\n  padding-left: 1.8rem;\n  border-left: 1px solid var(--line);\n}\n\n#gdp .timeline-item {\n  position: relative;\n  padding-bottom: 2.6rem;\n}\n\n#gdp .timeline-item:last-child { padding-bottom: 0; }\n\n#gdp .timeline-item::before {\n  content: \"\";\n  position: absolute;\n  left: calc(-1.8rem - 4px);\n  top: 0.55rem;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--ink-900);\n  border: 1px solid var(--accent);\n  transition: background 0.3s var(--ease);\n}\n\n#gdp .timeline-item:hover::before { background: var(--accent); }\n\n#gdp .timeline-date {\n  display: block;\n  font-family: var(--font-mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.14em;\n  color: var(--text-dim);\n  margin-bottom: 0.45rem;\n}\n\n#gdp .timeline-item h5 {\n  font-size: 1.3rem;\n  margin-bottom: 0.2rem;\n}\n\n#gdp .timeline-org {\n  font-size: 0.85rem;\n  color: var(--accent);\n  margin-bottom: 0.7rem;\n}\n\n#gdp .timeline-points li {\n  position: relative;\n  padding-left: 1.1rem;\n  font-size: 0.9rem;\n  color: var(--text-muted);\n  margin-bottom: 0.3rem;\n}\n\n#gdp .timeline-points li::before {\n  content: \"\u2014\";\n  position: absolute;\n  left: 0;\n  color: var(--text-dim);\n}\n\n#gdp .cv-extras {\n  display: grid;\n  gap: 1.6rem;\n  margin-top: 3rem;\n  padding-top: 2.2rem;\n  border-top: 1px solid var(--line);\n}\n\n#gdp .cv-extras h5 {\n  font-family: var(--font-mono);\n  font-size: 0.66rem;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: var(--text-dim);\n  margin-bottom: 0.4rem;\n}\n\n#gdp .cv-extras p {\n  margin: 0;\n  font-size: 0.92rem;\n  color: var(--text-muted);\n}\n\n\/* ---------- F\u00e4higkeiten im Detail ---------- *\/\n#gdp .skill-catalog {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 1.4rem;\n}\n\n#gdp .catalog-card {\n  padding: 1.8rem 1.8rem 1.6rem;\n  background: var(--ink-700);\n  border: 1px solid var(--line);\n  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);\n}\n\n#gdp .catalog-card:hover {\n  border-color: var(--accent-line);\n  transform: translateY(-3px);\n}\n\n#gdp .catalog-card h4 {\n  font-size: 1.3rem;\n  margin-bottom: 1.1rem;\n  padding-bottom: 0.8rem;\n  border-bottom: 1px solid var(--line);\n}\n\n#gdp .detail-list {\n  font-size: 0.92rem;\n  color: var(--text);\n}\n\n#gdp .detail-list > li {\n  position: relative;\n  padding-left: 1.2rem;\n  margin-bottom: 0.6rem;\n}\n\n#gdp .detail-list > li::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.72em;\n  width: 6px;\n  height: 1px;\n  background: var(--accent);\n}\n\n#gdp .detail-list ul {\n  margin-top: 0.35rem;\n  padding-left: 0.2rem;\n}\n\n#gdp .detail-list ul li {\n  position: relative;\n  padding-left: 1.1rem;\n  font-size: 0.86rem;\n  color: var(--text-muted);\n  margin-bottom: 0.2rem;\n}\n\n#gdp .detail-list ul li::before {\n  content: \"\u00b7\";\n  position: absolute;\n  left: 0.2rem;\n  color: var(--text-dim);\n}\n\n\/* ---------- Genutzte Software ---------- *\/\n#gdp .tool-strip {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.6rem;\n}\n\n#gdp .tool-strip li {\n  padding: 0.6rem 1.1rem;\n  border: 1px solid var(--line);\n  background: var(--ink-700);\n  font-family: var(--font-mono);\n  font-size: 0.72rem;\n  letter-spacing: 0.1em;\n  color: var(--text-muted);\n  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);\n}\n\n#gdp .tool-strip li:hover {\n  color: var(--accent);\n  border-color: var(--accent-line);\n}\n\n\/* ---------- Zertifikate ---------- *\/\n#gdp .certificate-list {\n  border-top: 1px solid var(--line);\n}\n\n#gdp .certificate-list li {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.6rem 2rem;\n  padding: 1.2rem 0.2rem;\n  border-bottom: 1px solid var(--line);\n  transition: background 0.3s var(--ease), padding-left 0.3s var(--ease);\n}\n\n#gdp .certificate-list li:hover {\n  background: rgba(255, 255, 255, 0.02);\n  padding-left: 0.8rem;\n}\n\n#gdp .certificate-list strong {\n  display: block;\n  font-family: var(--font-display);\n  font-size: 1.2rem;\n  font-weight: 400;\n}\n\n#gdp .certificate-list span {\n  font-family: var(--font-mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.12em;\n  color: var(--text-dim);\n}\n\n#gdp .certificate-list a {\n  flex: 0 0 auto;\n  font-size: 0.8rem;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--accent);\n  border-bottom: 1px solid transparent;\n  transition: border-color 0.25s var(--ease);\n}\n\n#gdp .certificate-list a:hover { border-bottom-color: var(--accent); }\n\n\/* ---------- Kreativraum ---------- *\/\n#gdp .gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  grid-auto-rows: 220px;\n  gap: 1.2rem;\n}\n\n#gdp .gallery-item {\n  position: relative;\n  margin: 0;\n  overflow: hidden;\n  border: 1px solid var(--line);\n  cursor: zoom-in;\n}\n\n#gdp .gallery-item.wide { grid-column: span 2; }\n#gdp .gallery-item.tall { grid-row: span 2; }\n\n#gdp .gallery-item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.8s var(--ease), filter 0.5s var(--ease);\n}\n\n#gdp .gallery-item:hover img {\n  transform: scale(1.05);\n  filter: brightness(0.55);\n}\n\n#gdp .gallery-item figcaption {\n  position: absolute;\n  inset: auto 0 0 0;\n  padding: 1rem 1.1rem;\n  background: linear-gradient(180deg, transparent, rgba(11, 13, 18, 0.9));\n  font-family: var(--font-mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.12em;\n  color: var(--text);\n  opacity: 0;\n  transform: translateY(0.6rem);\n  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);\n}\n\n#gdp .gallery-item:hover figcaption,\n#gdp .gallery-item:focus-within figcaption {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* ---------- Making-of \/ Breakdowns ---------- *\/\n#gdp .breakdown-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1.4rem;\n}\n\n#gdp .breakdown-card {\n  display: flex;\n  flex-direction: column;\n  padding: 1.9rem 1.8rem 1.6rem;\n  background: var(--ink-700);\n  border: 1px solid var(--line);\n  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),\n              background 0.4s var(--ease);\n}\n\n#gdp .breakdown-card:hover {\n  border-color: var(--accent-line);\n  background: var(--ink-600);\n  transform: translateY(-3px);\n}\n\n#gdp .breakdown-index {\n  font-family: var(--font-mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.24em;\n  color: var(--accent);\n  margin-bottom: 1rem;\n}\n\n#gdp .breakdown-card h4 {\n  font-size: 1.35rem;\n  margin-bottom: 0.7rem;\n}\n\n#gdp .breakdown-card p {\n  font-size: 0.92rem;\n  color: var(--text-muted);\n  margin-bottom: 1.4rem;\n}\n\n#gdp .breakdown-more {\n  margin-top: auto;\n  font-size: 0.8rem;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--accent);\n}\n\n#gdp .idea-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: 1.4rem;\n  margin-top: 3.5rem;\n}\n\n#gdp .idea-card {\n  padding: 2rem 1.8rem;\n  background: var(--ink-700);\n  border: 1px solid var(--line);\n  border-top: 1px solid var(--accent-line);\n  transition: transform 0.4s var(--ease), background 0.4s var(--ease);\n}\n\n#gdp .idea-card:hover {\n  transform: translateY(-3px);\n  background: var(--ink-600);\n}\n\n#gdp .idea-card h3 {\n  font-size: 1.35rem;\n  margin-bottom: 0.7rem;\n}\n\n#gdp .idea-card p {\n  margin: 0;\n  font-size: 0.92rem;\n  color: var(--text-muted);\n}\n\n\/* ---------- Kontakt ---------- *\/\n#gdp .contact-layout {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: clamp(2.5rem, 6vw, 4.5rem);\n  align-items: start;\n}\n\n#gdp .contact-details {\n  margin: 2.2rem 0;\n  display: grid;\n  gap: 1.1rem;\n}\n\n#gdp .contact-details li {\n  font-size: 0.95rem;\n  color: var(--text);\n}\n\n#gdp .contact-details span {\n  display: block;\n  font-family: var(--font-mono);\n  font-size: 0.64rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--text-dim);\n  margin-bottom: 0.25rem;\n}\n\n#gdp .contact-mail {\n  display: inline-block;\n  font-family: var(--font-display);\n  font-size: clamp(1.6rem, 5vw, 3rem);\n  color: var(--text);\n  border-bottom: 1px solid var(--line-strong);\n  padding-bottom: 0.2rem;\n  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);\n}\n\n#gdp .contact-mail:hover {\n  color: var(--accent);\n  border-color: var(--accent);\n}\n\n#gdp .contact-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem 2.2rem;\n  padding-top: 1.8rem;\n  border-top: 1px solid var(--line);\n}\n\n#gdp .contact-links a {\n  font-size: 0.82rem;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--text-muted);\n  border-bottom: 1px solid transparent;\n  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);\n}\n\n#gdp .contact-links a:hover {\n  color: var(--accent);\n  border-bottom-color: var(--accent);\n}\n\n\/* ---------- Kontaktformular ---------- *\/\n#gdp .contact-form {\n  padding: 2rem 1.9rem;\n  background: var(--ink-700);\n  border: 1px solid var(--line);\n}\n\n#gdp .form-row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: 1.2rem;\n}\n\n#gdp .form-row label {\n  font-family: var(--font-mono);\n  font-size: 0.64rem;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: var(--text-dim);\n}\n\n#gdp .form-row input,\n#gdp .form-row textarea {\n  width: 100%;\n  padding: 0.8rem 0.9rem;\n  background: var(--ink-900);\n  border: 1px solid var(--line);\n  color: var(--text);\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n  font-weight: 300;\n  transition: border-color 0.25s var(--ease);\n}\n\n#gdp .form-row textarea { resize: vertical; }\n\n#gdp .form-row input:focus,\n#gdp .form-row textarea:focus {\n  outline: none;\n  border-color: var(--accent-line);\n}\n\n#gdp .form-row input:user-invalid,\n#gdp .form-row textarea:user-invalid {\n  border-color: #a85b4b;\n}\n\n#gdp .contact-form .btn { width: 100%; }\n\n#gdp .form-hint {\n  display: block;\n  margin-top: 1rem;\n  font-family: var(--font-mono);\n  font-size: 0.66rem;\n  letter-spacing: 0.1em;\n  line-height: 1.7;\n  color: var(--text-dim);\n}\n\n#gdp .form-hint.is-success { color: var(--accent); }\n\n\/* ---------- Footer ---------- *\/\n#gdp .site-footer {\n  padding: 2.2rem 0;\n  border-top: 1px solid var(--line);\n  background: var(--ink-800);\n}\n\n#gdp .footer-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.6rem 2rem;\n  justify-content: space-between;\n  font-family: var(--font-mono);\n  font-size: 0.68rem;\n  letter-spacing: 0.12em;\n  color: var(--text-dim);\n}\n\n#gdp .footer-inner p { margin: 0; }\n#gdp .footer-inner a:hover { color: var(--accent); }\n\n\/* ---------- Lightbox ---------- *\/\n#gdp .lightbox {\n  position: fixed;\n  inset: 0;\n  z-index: 200;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding: clamp(1rem, 5vw, 4rem);\n  background: rgba(6, 7, 10, 0.94);\n  backdrop-filter: blur(6px);\n  opacity: 0;\n  transition: opacity 0.3s var(--ease);\n}\n\n#gdp .lightbox.is-open { opacity: 1; }\n\n#gdp .lightbox-figure {\n  margin: 0;\n  max-width: min(1000px, 100%);\n  text-align: center;\n}\n\n#gdp .lightbox-figure img {\n  max-height: 78vh;\n  width: auto;\n  margin-inline: auto;\n  border: 1px solid var(--line);\n}\n\n#gdp .lightbox-figure figcaption {\n  margin-top: 1.1rem;\n  font-family: var(--font-mono);\n  font-size: 0.72rem;\n  letter-spacing: 0.12em;\n  color: var(--text-muted);\n}\n\n#gdp .lightbox-close,\n#gdp .lightbox-nav {\n  background: none;\n  border: 1px solid var(--line);\n  color: var(--text);\n  cursor: pointer;\n  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);\n}\n\n#gdp .lightbox-close:hover,\n#gdp .lightbox-nav:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n#gdp .lightbox-close {\n  position: absolute;\n  top: 1.4rem;\n  right: 1.4rem;\n  width: 2.6rem;\n  height: 2.6rem;\n  font-size: 1.5rem;\n  line-height: 1;\n}\n\n#gdp .lightbox-nav {\n  flex: 0 0 auto;\n  width: 3rem;\n  height: 3rem;\n  font-size: 2rem;\n  line-height: 1;\n}\n\n\/* ---------- Scroll-Animation ---------- *\/\n#gdp .reveal {\n  opacity: 0;\n  transform: translateY(22px);\n  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);\n}\n\n#gdp .reveal.is-visible {\n  opacity: 1;\n  transform: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #gdp { scroll-behavior: auto; }\n\n  #gdp *,\n#gdp *::before,\n#gdp *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  #gdp .reveal {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n\/* ---------- Responsive ---------- *\/\n@media (max-width: 900px) {\n  #gdp { --gutter: 1.4rem; }\n\n  #gdp .nav-toggle { display: flex; }\n\n  #gdp .nav {\n    position: fixed;\n    inset: 5rem 0 auto 0;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0;\n    padding: 1rem var(--gutter) 2rem;\n    background: rgba(11, 13, 18, 0.97);\n    backdrop-filter: blur(14px);\n    border-bottom: 1px solid var(--line);\n    transform: translateY(-120%);\n    opacity: 0;\n    pointer-events: none;\n    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);\n  }\n\n  #gdp .nav.is-open {\n    transform: none;\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  #gdp .nav a {\n    width: 100%;\n    padding: 1rem 0;\n    font-size: 1rem;\n    border-bottom: 1px solid var(--line);\n  }\n\n  #gdp .nav .nav-cta {\n    margin-top: 1.2rem;\n    border: 1px solid var(--accent-line);\n    color: var(--accent);\n    text-align: center;\n  }\n\n  #gdp .about-grid { grid-template-columns: 1fr; }\n\n  #gdp .about-portrait {\n    max-width: 320px;\n  }\n\n  #gdp .gallery { grid-auto-rows: 200px; }\n\n  #gdp .gallery-item.wide,\n#gdp .gallery-item.tall {\n    grid-column: span 1;\n    grid-row: span 1;\n  }\n}\n\n@media (max-width: 560px) {\n  #gdp .brand-text { display: none; }\n  #gdp .hero { min-height: auto; padding-top: 9rem; }\n  #gdp .hero-meta { gap: 1.6rem 2.5rem; }\n  #gdp .btn { width: 100%; text-align: center; }\n  #gdp .work-grid { grid-template-columns: 1fr; }\n  #gdp .lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; }\n}\n\n\/* ---------- Druck ---------- *\/\n@media print {\n  #gdp .site-header,\n#gdp .scroll-hint,\n#gdp .filter-bar,\n#gdp .lightbox,\n#gdp .hero-glow { display: none !important; }\n\n  #gdp { background: #fff; color: #000; }\n  #gdp .section,\n#gdp .section-alt { background: #fff; border-color: #ccc; }\n  #gdp .reveal { opacity: 1; transform: none; }\n}\n\n<\/style>\n\n<div id=\"gdp\" class=\"gdp-root\">\n<!-- ============ NAVIGATION ============ -->\n  <header class=\"site-header\" id=\"gdp-siteHeader\">\n    <div class=\"container header-inner\">\n      <a class=\"brand\" href=\"#gdp-top\">\n        <span class=\"brand-mark\">VN<\/span>\n        <span class=\"brand-text\">Vorname Nachname<\/span>\n      <\/a>\n\n      <nav class=\"nav\" id=\"gdp-nav\" aria-label=\"Hauptnavigation\">\n        <a href=\"#gdp-about\">\u00dcber mich<\/a>\n        <a href=\"#gdp-work\">Arbeiten<\/a>\n        <a href=\"#gdp-resume\">Resume<\/a>\n        <a href=\"#gdp-creative\">Kreativraum<\/a>\n        <a href=\"#gdp-contact\" class=\"nav-cta\">Kontakt<\/a>\n      <\/nav>\n\n      <button class=\"nav-toggle\" id=\"gdp-navToggle\" aria-label=\"Men\u00fc \u00f6ffnen\" aria-expanded=\"false\" aria-controls=\"gdp-nav\">\n        <span><\/span><span><\/span><span><\/span>\n      <\/button>\n    <\/div>\n    <div class=\"scroll-progress\" id=\"gdp-scrollProgress\"><\/div>\n  <\/header>\n\n  <!-- ============ HERO \/ WILLKOMMEN ============ -->\n  <section class=\"hero\" id=\"gdp-top\">\n    <div class=\"hero-glow\" aria-hidden=\"true\"><\/div>\n    <div class=\"container hero-inner\">\n      <p class=\"eyebrow reveal\">Bewerbung als Game Designer<\/p>\n      <h1 class=\"hero-title reveal\">\n        Ich baue Systeme,<br>\n        die sich <em>lebendig<\/em> anf\u00fchlen.\n      <\/h1>\n      <p class=\"hero-lead reveal\">\n        Willkommen auf meiner Seite. Hier findest du Informationen \u00fcber mich, meinen\n        Lebenslauf, ein Portfolio meiner bisherigen Arbeiten und Links zu allen Projekten.\n        Nutze die Navigation oben, um dich zurechtzufinden.\n      <\/p>\n\n      <div class=\"hero-actions reveal\">\n        <a class=\"btn btn-primary\" href=\"#gdp-work\">Arbeiten ansehen<\/a>\n        <a class=\"btn btn-ghost\" href=\"#gdp-resume\">CV ansehen<\/a>\n      <\/div>\n\n      <ul class=\"hero-meta reveal\">\n        <li><span>Standort<\/span> Stadt, Land<\/li>\n        <li><span>Fokus<\/span> Systems &amp; Level Design<\/li>\n        <li><span>Status<\/span> Offen f\u00fcr Festanstellung<\/li>\n        <li><span>Repository<\/span> <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\">github.com\/nutzername<\/a><\/li>\n      <\/ul>\n    <\/div>\n    <a class=\"scroll-hint\" href=\"#gdp-about\" aria-label=\"Nach unten scrollen\">\n      <span><\/span>\n    <\/a>\n  <\/section>\n\n  <main>\n\n    <!-- ============ 01 \u00dcBER MICH ============ -->\n    <section class=\"section\" id=\"gdp-about\">\n      <div class=\"container\">\n        <div class=\"section-head reveal\">\n          <span class=\"section-index\">01<\/span>\n          <h2 class=\"section-title\">\u00dcber mich<\/h2>\n          <p class=\"section-sub\">Ausbildung, Schwerpunkte und das, was ich als N\u00e4chstes suche.<\/p>\n        <\/div>\n\n        <div class=\"about-grid\">\n          <div class=\"about-portrait reveal\">\n            <div class=\"portrait-frame\">\n              <!-- Bild ersetzen: assets\/portrait.jpg -->\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%20800%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Portr%C3%A4t%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22pbg%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231f2430%22\/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230b0d12%22\/%3E%3C\/linearGradient%3E%3C\/defs%3E%3Crect%20width%3D%22800%22%20height%3D%221000%22%20fill%3D%22url%28%23pbg%29%22\/%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.22%22%20fill%3D%22none%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20760%20L800%20620%20M0%20840%20L800%20700%20M0%20920%20L800%20780%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%22400%22%20cy%3D%22380%22%20r%3D%22120%22\/%3E%3Cpath%20d%3D%22M225%20720c0-105%2078-190%20175-190s175%2085%20175%20190%22\/%3E%3C\/g%3E%3Ccircle%20cx%3D%22400%22%20cy%3D%22380%22%20r%3D%22170%22%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.15%22%20stroke-width%3D%221%22\/%3E%3Ctext%20x%3D%22400%22%20y%3D%22905%22%20text-anchor%3D%22middle%22%20font-family%3D%22monospace%22%20font-size%3D%2222%22%0A%20%20%20%20%20%20%20%20letter-spacing%3D%226%22%20fill%3D%22%23737681%22%3EPORTRAIT%204%3A5%3C\/text%3E%3C\/svg%3E\" alt=\"Portr\u00e4t von Vorname Nachname\">\n            <\/div>\n            <p class=\"portrait-caption\">Vorname Nachname \u2014 Game Designer, seit 20XX<\/p>\n          <\/div>\n\n          <div class=\"about-text reveal\">\n            <p class=\"lead\">\n              Absatz 1 \u2014 Wo du stehst: Abschluss, Studiengang oder Ausbildung, gerade\n              abgeschlossen oder laufend. Und was du suchst: Idealerweise eine Rolle im\n              Game Design, offen auch f\u00fcr angrenzende Bereiche.\n            <\/p>\n            <p>\n              Absatz 2 \u2014 Deine Bandbreite: Mein Wissen ist breit angelegt, besonders stark\n              bin ich in [Schwerpunkt A], [Schwerpunkt B] und der Arbeit mit [Engine]. Nenne\n              hier konkret Genres, Systeme und Engines statt allgemeiner Schlagworte.\n            <\/p>\n            <p>\n              Absatz 3 \u2014 Nebenfelder: Weitere F\u00e4higkeiten, die dein Profil abrunden \u2014\n              z. B. Bildbearbeitung, Videoschnitt, 3D-Grundlagen, Web oder Datenanalyse.\n              Kurz halten, Details stehen im Resume.\n            <\/p>\n            <p class=\"about-repo\">\n              Ein Teil des Quellcodes meiner Projekte liegt \u00f6ffentlich auf\n              <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\">GitHub<\/a> und\n              spielbare Builds auf\n              <a href=\"https:\/\/itch.io\/\" target=\"_blank\" rel=\"noopener\">itch.io<\/a>.\n            <\/p>\n\n            <div class=\"skills\">\n              <div class=\"skill-block\">\n                <h3>Design<\/h3>\n                <ul class=\"tag-list\">\n                  <li>Game Systems<\/li>\n                  <li>Level Design<\/li>\n                  <li>Narrative Design<\/li>\n                  <li>Balancing<\/li>\n                  <li>Economy Design<\/li>\n                  <li>UX f\u00fcr Spiele<\/li>\n                <\/ul>\n              <\/div>\n              <div class=\"skill-block\">\n                <h3>Engines &amp; Tools<\/h3>\n                <ul class=\"tag-list\">\n                  <li>Unity<\/li>\n                  <li>Unreal Engine<\/li>\n                  <li>Godot<\/li>\n                  <li>Blender<\/li>\n                  <li>Figma<\/li>\n                  <li>Miro<\/li>\n                <\/ul>\n              <\/div>\n              <div class=\"skill-block\">\n                <h3>Technisch<\/h3>\n                <ul class=\"tag-list\">\n                  <li>C#<\/li>\n                  <li>C++<\/li>\n                  <li>Blueprints<\/li>\n                  <li>Python<\/li>\n                  <li>Git<\/li>\n                <\/ul>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ============ AUSGEW\u00c4HLTE ARBEITEN (FEATURED) ============ -->\n    <section class=\"featured section-alt\" aria-labelledby=\"featuredTitle\">\n      <div class=\"container\">\n        <h2 class=\"featured-title reveal\" id=\"gdp-featuredTitle\">Ausgew\u00e4hlte Arbeiten<\/h2>\n        <div class=\"featured-grid\">\n          <a class=\"featured-item reveal\" href=\"#gdp-work\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Projektbild%201%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23141822%22\/%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.13%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20200H1600M0%20400H1600M0%20600H1600M0%20800H1600M200%200V1000M400%200V1000M600%200V1000M800%200V1000M1000%200V1000M1200%200V1000M1400%200V1000%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.5%22%20stroke-width%3D%223%22%3E%3Crect%20x%3D%22240%22%20y%3D%22240%22%20width%3D%22380%22%20height%3D%22380%22\/%3E%3Crect%20x%3D%22980%22%20y%3D%22380%22%20width%3D%22380%22%20height%3D%22380%22\/%3E%3Cpath%20d%3D%22M620%20430H980%22\/%3E%3C\/g%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%22430%22%20r%3D%2260%22%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.25%22\/%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%22570%22%20r%3D%2260%22%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.12%22\/%3E%3Ctext%20x%3D%2280%22%20y%3D%22920%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EPROJEKT%2001%3C\/text%3E%3C\/svg%3E\" alt=\"Projekttitel Eins\">\n            <span class=\"featured-label\">\n              <strong>Projekttitel Eins<\/strong>\n              <small>Lead Game Design \u00b7 Unity<\/small>\n            <\/span>\n          <\/a>\n          <a class=\"featured-item reveal\" href=\"#gdp-work\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Projektbild%202%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23111621%22\/%3E%3Cg%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.08%22%3E%3Cpolygon%20points%3D%220%2C1000%20400%2C520%20800%2C1000%22\/%3E%3Cpolygon%20points%3D%22600%2C1000%201080%2C420%201600%2C1000%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%223%22%3E%3Cpolyline%20points%3D%220%2C1000%20400%2C520%20800%2C1000%22\/%3E%3Cpolyline%20points%3D%22600%2C1000%201080%2C420%201600%2C1000%22\/%3E%3C\/g%3E%3Ccircle%20cx%3D%221300%22%20cy%3D%22220%22%20r%3D%2290%22%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.6%22%20stroke-width%3D%223%22\/%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.2%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20760H1600M0%20860H1600%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%22920%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EPROJEKT%2002%3C\/text%3E%3C\/svg%3E\" alt=\"Projekttitel Zwei\">\n            <span class=\"featured-label\">\n              <strong>Projekttitel Zwei<\/strong>\n              <small>Level Design \u00b7 Unreal<\/small>\n            <\/span>\n          <\/a>\n          <a class=\"featured-item reveal\" href=\"#gdp-work\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Projektbild%203%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%230f131c%22\/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.35%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M120%20820%20C%20420%20820%2C%20420%20200%2C%20760%20200%20S%201120%20820%2C%201480%20820%22\/%3E%3Cpath%20d%3D%22M120%20700%20C%20460%20700%2C%20460%20320%2C%20800%20320%20S%201140%20700%2C%201480%20700%22%20stroke-opacity%3D%220.2%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23c9a86a%22%3E%3Ccircle%20cx%3D%22760%22%20cy%3D%22200%22%20r%3D%2214%22%20fill-opacity%3D%220.9%22\/%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%22510%22%20r%3D%229%22%20fill-opacity%3D%220.5%22\/%3E%3Ccircle%20cx%3D%221120%22%20cy%3D%22510%22%20r%3D%229%22%20fill-opacity%3D%220.5%22\/%3E%3C\/g%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.12%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%228%2010%22%3E%3Cpath%20d%3D%22M760%200V1000M0%20510H1600%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%22920%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EPROTOTYP%2003%3C\/text%3E%3C\/svg%3E\" alt=\"Projekttitel Drei\">\n            <span class=\"featured-label\">\n              <strong>Projekttitel Drei<\/strong>\n              <small>Prototyp \u00b7 Godot<\/small>\n            <\/span>\n          <\/a>\n          <a class=\"featured-item reveal\" href=\"#gdp-work\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Game%20Jam%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%2312161f%22\/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%223%22%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22470%22%20r%3D%22200%22\/%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22470%22%20r%3D%22290%22%20stroke-opacity%3D%220.2%22\/%3E%3Cpath%20d%3D%22M800%20270V470L950%20560%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.55%22%3E%3Crect%20x%3D%22790%22%20y%3D%22150%22%20width%3D%2220%22%20height%3D%2250%22\/%3E%3Crect%20x%3D%22790%22%20y%3D%22740%22%20width%3D%2220%22%20height%3D%2250%22\/%3E%3Crect%20x%3D%22450%22%20y%3D%22460%22%20width%3D%2250%22%20height%3D%2220%22\/%3E%3Crect%20x%3D%221100%22%20y%3D%22460%22%20width%3D%2250%22%20height%3D%2220%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%22920%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3E48H%20JAM%3C\/text%3E%3C\/svg%3E\" alt=\"Jam-Titel\">\n            <span class=\"featured-label\">\n              <strong>Jam-Titel<\/strong>\n              <small>Game Jam \u00b7 48 Stunden<\/small>\n            <\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ============ 02 ARBEITEN \/ LINKS ============ -->\n    <section class=\"section\" id=\"gdp-work\">\n      <div class=\"container\">\n        <div class=\"section-head reveal\">\n          <span class=\"section-index\">02<\/span>\n          <h2 class=\"section-title\">Bisherige Arbeiten<\/h2>\n          <p class=\"section-sub\">\n            Game-Design-Arbeiten und weitere Projekte. Jede Karte verlinkt auf die\n            eigentliche Arbeit \u2014 Build, Store-Seite, Repository, Design-Dokument oder Video.\n          <\/p>\n        <\/div>\n\n        <div class=\"filter-bar reveal\" role=\"group\" aria-label=\"Arbeiten filtern\">\n          <button class=\"filter is-active\" data-filter=\"all\">Alle<\/button>\n          <button class=\"filter\" data-filter=\"game\">Spiele<\/button>\n          <button class=\"filter\" data-filter=\"prototype\">Prototypen<\/button>\n          <button class=\"filter\" data-filter=\"doc\">Design-Dokumente<\/button>\n          <button class=\"filter\" data-filter=\"jam\">Game Jams<\/button>\n          <button class=\"filter\" data-filter=\"other\">Weitere Arbeiten<\/button>\n        <\/div>\n\n        <div class=\"work-grid\" id=\"gdp-workGrid\">\n\n          <article class=\"work-card reveal\" data-category=\"game\">\n            <div class=\"work-thumb\">\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Projektbild%201%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23141822%22\/%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.13%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20200H1600M0%20400H1600M0%20600H1600M0%20800H1600M200%200V1000M400%200V1000M600%200V1000M800%200V1000M1000%200V1000M1200%200V1000M1400%200V1000%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.5%22%20stroke-width%3D%223%22%3E%3Crect%20x%3D%22240%22%20y%3D%22240%22%20width%3D%22380%22%20height%3D%22380%22\/%3E%3Crect%20x%3D%22980%22%20y%3D%22380%22%20width%3D%22380%22%20height%3D%22380%22\/%3E%3Cpath%20d%3D%22M620%20430H980%22\/%3E%3C\/g%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%22430%22%20r%3D%2260%22%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.25%22\/%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%22570%22%20r%3D%2260%22%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.12%22\/%3E%3Ctext%20x%3D%2280%22%20y%3D%22920%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EPROJEKT%2001%3C\/text%3E%3C\/svg%3E\" alt=\"Screenshot aus Projekttitel Eins\">\n              <span class=\"work-badge\">Shipped<\/span>\n            <\/div>\n            <div class=\"work-body\">\n              <header>\n                <h3>Projekttitel Eins<\/h3>\n                <p class=\"work-role\">Lead Game Designer \u00b7 Team von 6 \u00b7 20XX<\/p>\n              <\/header>\n              <p class=\"work-desc\">\n                Ein bis zwei S\u00e4tze: Was ist das Spiel, was war deine Verantwortung und was\n                war das interessanteste Designproblem, das du gel\u00f6st hast?\n              <\/p>\n              <ul class=\"tag-list small\">\n                <li>Unity<\/li><li>C#<\/li><li>Roguelike<\/li><li>Systemdesign<\/li>\n              <\/ul>\n              <div class=\"work-links\">\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Spielen (itch.io) <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Trailer <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Design-Doc <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">GitHub <span aria-hidden=\"true\">\u2197<\/span><\/a>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <article class=\"work-card reveal\" data-category=\"game\">\n            <div class=\"work-thumb\">\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Projektbild%202%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23111621%22\/%3E%3Cg%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.08%22%3E%3Cpolygon%20points%3D%220%2C1000%20400%2C520%20800%2C1000%22\/%3E%3Cpolygon%20points%3D%22600%2C1000%201080%2C420%201600%2C1000%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%223%22%3E%3Cpolyline%20points%3D%220%2C1000%20400%2C520%20800%2C1000%22\/%3E%3Cpolyline%20points%3D%22600%2C1000%201080%2C420%201600%2C1000%22\/%3E%3C\/g%3E%3Ccircle%20cx%3D%221300%22%20cy%3D%22220%22%20r%3D%2290%22%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.6%22%20stroke-width%3D%223%22\/%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.2%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20760H1600M0%20860H1600%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%22920%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EPROJEKT%2002%3C\/text%3E%3C\/svg%3E\" alt=\"Screenshot aus Projekttitel Zwei\">\n              <span class=\"work-badge\">Steam<\/span>\n            <\/div>\n            <div class=\"work-body\">\n              <header>\n                <h3>Projekttitel Zwei<\/h3>\n                <p class=\"work-role\">Level Designer \u00b7 Studio XY \u00b7 20XX\u201320XX<\/p>\n              <\/header>\n              <p class=\"work-desc\">\n                Kurzbeschreibung des Titels und deiner Level: Anzahl, Umfang, Ziel.\n                Wenn m\u00f6glich mit Wirkung \u2014 z. B. verbesserte Completion-Rate.\n              <\/p>\n              <ul class=\"tag-list small\">\n                <li>Unreal<\/li><li>Blueprints<\/li><li>Level Design<\/li>\n              <\/ul>\n              <div class=\"work-links\">\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Store-Seite <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Level-Breakdown <span aria-hidden=\"true\">\u2197<\/span><\/a>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <article class=\"work-card reveal\" data-category=\"prototype\">\n            <div class=\"work-thumb\">\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Projektbild%203%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%230f131c%22\/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.35%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M120%20820%20C%20420%20820%2C%20420%20200%2C%20760%20200%20S%201120%20820%2C%201480%20820%22\/%3E%3Cpath%20d%3D%22M120%20700%20C%20460%20700%2C%20460%20320%2C%20800%20320%20S%201140%20700%2C%201480%20700%22%20stroke-opacity%3D%220.2%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23c9a86a%22%3E%3Ccircle%20cx%3D%22760%22%20cy%3D%22200%22%20r%3D%2214%22%20fill-opacity%3D%220.9%22\/%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%22510%22%20r%3D%229%22%20fill-opacity%3D%220.5%22\/%3E%3Ccircle%20cx%3D%221120%22%20cy%3D%22510%22%20r%3D%229%22%20fill-opacity%3D%220.5%22\/%3E%3C\/g%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.12%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%228%2010%22%3E%3Cpath%20d%3D%22M760%200V1000M0%20510H1600%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%22920%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EPROTOTYP%2003%3C\/text%3E%3C\/svg%3E\" alt=\"Prototyp-Ansicht von Projekttitel Drei\">\n              <span class=\"work-badge\">Prototyp<\/span>\n            <\/div>\n            <div class=\"work-body\">\n              <header>\n                <h3>Projekttitel Drei<\/h3>\n                <p class=\"work-role\">Solo \u00b7 Prototyp \u00b7 20XX<\/p>\n              <\/header>\n              <p class=\"work-desc\">\n                Welche Design-Hypothese hast du getestet? Was hat funktioniert, was nicht?\n                Ehrliche Prototypen wirken oft st\u00e4rker als polierte Projekte.\n              <\/p>\n              <ul class=\"tag-list small\">\n                <li>Godot<\/li><li>Movement<\/li><li>Playtesting<\/li>\n              <\/ul>\n              <div class=\"work-links\">\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">WebGL-Build <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">GitHub <span aria-hidden=\"true\">\u2197<\/span><\/a>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <article class=\"work-card reveal\" data-category=\"prototype\">\n            <div class=\"work-thumb\">\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20laufendes%20Projekt%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23101520%22\/%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M200%20800%20L400%20800%20L400%20600%20L600%20600%20L600%20700%20L800%20700%20L800%20400%20L1000%20400%20L1000%20550%20L1200%20550%20L1200%20300%20L1400%20300%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.12%22%3E%3Crect%20x%3D%22200%22%20y%3D%22800%22%20width%3D%22200%22%20height%3D%22120%22\/%3E%3Crect%20x%3D%22400%22%20y%3D%22600%22%20width%3D%22200%22%20height%3D%22320%22\/%3E%3Crect%20x%3D%22600%22%20y%3D%22700%22%20width%3D%22200%22%20height%3D%22220%22\/%3E%3Crect%20x%3D%22800%22%20y%3D%22400%22%20width%3D%22200%22%20height%3D%22520%22\/%3E%3Crect%20x%3D%221000%22%20y%3D%22550%22%20width%3D%22200%22%20height%3D%22370%22\/%3E%3Crect%20x%3D%221200%22%20y%3D%22300%22%20width%3D%22200%22%20height%3D%22620%22\/%3E%3C\/g%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%226%2012%22%3E%3Cpath%20d%3D%22M0%20300H1600M0%20550H1600%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%22180%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EWIP%3C\/text%3E%3C\/svg%3E\" alt=\"Prozeduraler Generator\">\n              <span class=\"work-badge\">Tool<\/span>\n            <\/div>\n            <div class=\"work-body\">\n              <header>\n                <h3>Prozeduraler Content-Generator<\/h3>\n                <p class=\"work-role\">Solo \u00b7 Tool &amp; Systemdesign \u00b7 20XX<\/p>\n              <\/header>\n              <p class=\"work-desc\">\n                Ein Generator f\u00fcr Level, Dungeons oder H\u00f6hlen. Beschreibe Regelsatz und\n                Kontrolle: Wie beh\u00e4ltst du Designabsicht bei prozeduralem Inhalt?\n                Der Making-of-Artikel steht im Kreativraum.\n              <\/p>\n              <ul class=\"tag-list small\">\n                <li>Unity<\/li><li>Prozedural<\/li><li>Toolbau<\/li>\n              <\/ul>\n              <div class=\"work-links\">\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Demo <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#gdp-breakdowns\">Making-of lesen<\/a>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <article class=\"work-card reveal\" data-category=\"doc\">\n            <div class=\"work-thumb\">\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Design-Dokument%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23151a24%22\/%3E%3Crect%20x%3D%22260%22%20y%3D%2290%22%20width%3D%221080%22%20height%3D%22820%22%20fill%3D%22%230f131c%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.35%22\/%3E%3Cg%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.5%22%3E%3Crect%20x%3D%22340%22%20y%3D%22190%22%20width%3D%22420%22%20height%3D%2226%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22250%22%20width%3D%22260%22%20height%3D%2214%22%20fill-opacity%3D%220.25%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23737681%22%20fill-opacity%3D%220.45%22%3E%3Crect%20x%3D%22340%22%20y%3D%22330%22%20width%3D%22920%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22370%22%20width%3D%22880%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22410%22%20width%3D%22700%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22500%22%20width%3D%22920%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22540%22%20width%3D%22820%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22580%22%20width%3D%22600%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22670%22%20width%3D%22900%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22710%22%20width%3D%22520%22%20height%3D%2212%22\/%3E%3C\/g%3E%3Crect%20x%3D%22340%22%20y%3D%22770%22%20width%3D%22180%22%20height%3D%2260%22%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.5%22\/%3E%3Ctext%20x%3D%2280%22%20y%3D%22930%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EGDD%3C\/text%3E%3C\/svg%3E\" alt=\"Auszug aus einem Design-Dokument\">\n              <span class=\"work-badge\">Dokument<\/span>\n            <\/div>\n            <div class=\"work-body\">\n              <header>\n                <h3>Design-Dokument: Titel<\/h3>\n                <p class=\"work-role\">Konzept &amp; Systemdesign \u00b7 20XX<\/p>\n              <\/header>\n              <p class=\"work-desc\">\n                Ein GDD, ein Combat-System-Breakdown oder eine Economy-Analyse. Zeigt,\n                wie du denkst und dokumentierst.\n              <\/p>\n              <ul class=\"tag-list small\">\n                <li>GDD<\/li><li>Systemdesign<\/li><li>Notion<\/li>\n              <\/ul>\n              <div class=\"work-links\">\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Dokument lesen <span aria-hidden=\"true\">\u2197<\/span><\/a>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <article class=\"work-card reveal\" data-category=\"jam\">\n            <div class=\"work-thumb\">\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Game%20Jam%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%2312161f%22\/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%223%22%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22470%22%20r%3D%22200%22\/%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22470%22%20r%3D%22290%22%20stroke-opacity%3D%220.2%22\/%3E%3Cpath%20d%3D%22M800%20270V470L950%20560%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.55%22%3E%3Crect%20x%3D%22790%22%20y%3D%22150%22%20width%3D%2220%22%20height%3D%2250%22\/%3E%3Crect%20x%3D%22790%22%20y%3D%22740%22%20width%3D%2220%22%20height%3D%2250%22\/%3E%3Crect%20x%3D%22450%22%20y%3D%22460%22%20width%3D%2250%22%20height%3D%2220%22\/%3E%3Crect%20x%3D%221100%22%20y%3D%22460%22%20width%3D%2250%22%20height%3D%2220%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%22920%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3E48H%20JAM%3C\/text%3E%3C\/svg%3E\" alt=\"Game-Jam-Eintrag\">\n              <span class=\"work-badge\">48h Jam<\/span>\n            <\/div>\n            <div class=\"work-body\">\n              <header>\n                <h3>Jam-Titel<\/h3>\n                <p class=\"work-role\">Game Design &amp; Writing \u00b7 Team von 4 \u00b7 20XX<\/p>\n              <\/header>\n              <p class=\"work-desc\">\n                Jam, Thema, Platzierung. Ein Satz dazu, was unter Zeitdruck \u00fcber deine\n                Priorisierung gelernt wurde.\n              <\/p>\n              <ul class=\"tag-list small\">\n                <li>Ludum Dare<\/li><li>Narrative<\/li>\n              <\/ul>\n              <div class=\"work-links\">\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Jam-Eintrag <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Post-Mortem <span aria-hidden=\"true\">\u2197<\/span><\/a>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <article class=\"work-card reveal\" data-category=\"other\">\n            <div class=\"work-thumb\">\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20Design-Dokument%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23151a24%22\/%3E%3Crect%20x%3D%22260%22%20y%3D%2290%22%20width%3D%221080%22%20height%3D%22820%22%20fill%3D%22%230f131c%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.35%22\/%3E%3Cg%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.5%22%3E%3Crect%20x%3D%22340%22%20y%3D%22190%22%20width%3D%22420%22%20height%3D%2226%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22250%22%20width%3D%22260%22%20height%3D%2214%22%20fill-opacity%3D%220.25%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23737681%22%20fill-opacity%3D%220.45%22%3E%3Crect%20x%3D%22340%22%20y%3D%22330%22%20width%3D%22920%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22370%22%20width%3D%22880%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22410%22%20width%3D%22700%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22500%22%20width%3D%22920%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22540%22%20width%3D%22820%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22580%22%20width%3D%22600%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22670%22%20width%3D%22900%22%20height%3D%2212%22\/%3E%3Crect%20x%3D%22340%22%20y%3D%22710%22%20width%3D%22520%22%20height%3D%2212%22\/%3E%3C\/g%3E%3Crect%20x%3D%22340%22%20y%3D%22770%22%20width%3D%22180%22%20height%3D%2260%22%20fill%3D%22none%22%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.5%22\/%3E%3Ctext%20x%3D%2280%22%20y%3D%22930%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EGDD%3C\/text%3E%3C\/svg%3E\" alt=\"Weitere Arbeiten au\u00dferhalb von Spielen\">\n              <span class=\"work-badge\">Weiteres<\/span>\n            <\/div>\n            <div class=\"work-body\">\n              <header>\n                <h3>Weitere Arbeiten<\/h3>\n                <p class=\"work-role\">Web \u00b7 Multimedia \u00b7 Software \u00b7 20XX\u201320XX<\/p>\n              <\/header>\n              <p class=\"work-desc\">\n                Platz f\u00fcr Arbeiten au\u00dferhalb von Spielen: Websites, Videoschnitt,\n                Illustration, Tools oder Software-Projekte. Zeigt Bandbreite, ohne den\n                Game-Design-Fokus zu verw\u00e4ssern.\n              <\/p>\n              <ul class=\"tag-list small\">\n                <li>Web<\/li><li>Multimedia<\/li><li>Tools<\/li>\n              <\/ul>\n              <div class=\"work-links\">\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Websites <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Multimedia <span aria-hidden=\"true\">\u2197<\/span><\/a>\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Software <span aria-hidden=\"true\">\u2197<\/span><\/a>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <article class=\"work-card reveal\" data-category=\"other\">\n            <div class=\"work-thumb\">\n              <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201600%201000%22%20role%3D%22img%22%20aria-label%3D%22Platzhalter%20laufendes%20Projekt%22%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23101520%22\/%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M200%20800%20L400%20800%20L400%20600%20L600%20600%20L600%20700%20L800%20700%20L800%20400%20L1000%20400%20L1000%20550%20L1200%20550%20L1200%20300%20L1400%20300%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23c9a86a%22%20fill-opacity%3D%220.12%22%3E%3Crect%20x%3D%22200%22%20y%3D%22800%22%20width%3D%22200%22%20height%3D%22120%22\/%3E%3Crect%20x%3D%22400%22%20y%3D%22600%22%20width%3D%22200%22%20height%3D%22320%22\/%3E%3Crect%20x%3D%22600%22%20y%3D%22700%22%20width%3D%22200%22%20height%3D%22220%22\/%3E%3Crect%20x%3D%22800%22%20y%3D%22400%22%20width%3D%22200%22%20height%3D%22520%22\/%3E%3Crect%20x%3D%221000%22%20y%3D%22550%22%20width%3D%22200%22%20height%3D%22370%22\/%3E%3Crect%20x%3D%221200%22%20y%3D%22300%22%20width%3D%22200%22%20height%3D%22620%22\/%3E%3C\/g%3E%3Cg%20stroke%3D%22%23c9a86a%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%226%2012%22%3E%3Cpath%20d%3D%22M0%20300H1600M0%20550H1600%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%22180%22%20font-family%3D%22monospace%22%20font-size%3D%2234%22%20letter-spacing%3D%228%22%20fill%3D%22%23737681%22%3EWIP%3C\/text%3E%3C\/svg%3E\" alt=\"Laufendes Nebenprojekt\">\n              <span class=\"work-badge\">Laufend<\/span>\n            <\/div>\n            <div class=\"work-body\">\n              <header>\n                <h3>Projekttitel Acht<\/h3>\n                <p class=\"work-role\">Nebenprojekt \u00b7 seit 20XX<\/p>\n              <\/header>\n              <p class=\"work-desc\">\n                Platzhalter f\u00fcr ein aktuelles Projekt. Auch unfertige Arbeit darf hier\n                stehen, wenn du den Stand transparent benennst.\n              <\/p>\n              <ul class=\"tag-list small\">\n                <li>Unity<\/li><li>Simulation<\/li>\n              <\/ul>\n              <div class=\"work-links\">\n                <a href=\"#\" target=\"_blank\" rel=\"noopener\">Devlog <span aria-hidden=\"true\">\u2197<\/span><\/a>\n              <\/div>\n            <\/div>\n          <\/article>\n\n        <\/div>\n\n        <p class=\"work-note reveal\">\n          Weitere Links: <a href=\"#\" target=\"_blank\" rel=\"noopener\">itch.io<\/a> \u00b7\n          <a href=\"#\" target=\"_blank\" rel=\"noopener\">GitHub<\/a> \u00b7\n          <a href=\"#\" target=\"_blank\" rel=\"noopener\">ArtStation<\/a> \u00b7\n          <a href=\"#\" target=\"_blank\" rel=\"noopener\">YouTube<\/a>\n        <\/p>\n      <\/div>\n    <\/section>\n\n    <!-- ============ 03 RESUME \/ WERDEGANG ============ -->\n    <section class=\"section section-alt\" id=\"gdp-resume\">\n      <div class=\"container\">\n        <div class=\"section-head reveal\">\n          <span class=\"section-index\">03<\/span>\n          <h2 class=\"section-title\">Resume<\/h2>\n          <p class=\"section-sub\">\n            Stationen meines Werdegangs, F\u00e4higkeiten im Detail sowie Abschl\u00fcsse und\n            Zertifikate.\n          <\/p>\n        <\/div>\n\n        <!-- PDF-Hinweis -->\n        <div class=\"pdf-box reveal\">\n          <div>\n            <h3>PDF-Dokument<\/h3>\n            <p>\n              Eine vollst\u00e4ndige PDF-Version meines Lebenslaufs l\u00e4sst sich \u00fcber den Button\n              rechts \u00f6ffnen oder herunterladen.\n            <\/p>\n          <\/div>\n          <a class=\"btn btn-primary\" href=\"#\" target=\"_blank\" rel=\"noopener\">PDF ansehen<\/a>\n        <\/div>\n\n        <!-- Stationen -->\n        <h3 class=\"block-heading reveal\">Stationen<\/h3>\n        <div class=\"cv-layout\">\n          <div class=\"cv-column\">\n            <h4 class=\"cv-heading reveal\">Beruflich<\/h4>\n            <ol class=\"timeline\">\n              <li class=\"timeline-item reveal\">\n                <span class=\"timeline-date\">20XX \u2014 heute<\/span>\n                <h5>Game Designer<\/h5>\n                <p class=\"timeline-org\">Studio \/ Unternehmen, Stadt<\/p>\n                <ul class=\"timeline-points\">\n                  <li>Verantwortungsbereich in einem Satz.<\/li>\n                  <li>Ein messbares Ergebnis oder Projekt.<\/li>\n                  <li>Zusammenarbeit mit welchen Disziplinen.<\/li>\n                <\/ul>\n              <\/li>\n              <li class=\"timeline-item reveal\">\n                <span class=\"timeline-date\">20XX \u2014 20XX<\/span>\n                <h5>Junior Game Designer<\/h5>\n                <p class=\"timeline-org\">Studio \/ Unternehmen, Stadt<\/p>\n                <ul class=\"timeline-points\">\n                  <li>Aufgabe eins.<\/li>\n                  <li>Aufgabe zwei.<\/li>\n                <\/ul>\n              <\/li>\n              <li class=\"timeline-item reveal\">\n                <span class=\"timeline-date\">20XX \u2014 20XX<\/span>\n                <h5>Praktikum \/ Werkstudent<\/h5>\n                <p class=\"timeline-org\">Studio \/ Unternehmen, Stadt<\/p>\n                <ul class=\"timeline-points\">\n                  <li>Was du dort konkret gemacht hast.<\/li>\n                <\/ul>\n              <\/li>\n            <\/ol>\n          <\/div>\n\n          <div class=\"cv-column\">\n            <h4 class=\"cv-heading reveal\">Ausbildung &amp; Weiterbildung<\/h4>\n            <ol class=\"timeline\">\n              <li class=\"timeline-item reveal\">\n                <span class=\"timeline-date\">20XX \u2014 20XX<\/span>\n                <h5>Studiengang, Abschluss<\/h5>\n                <p class=\"timeline-org\">Hochschule, Stadt<\/p>\n                <ul class=\"timeline-points\">\n                  <li>Schwerpunkt \/ Abschlussarbeit in einem Satz.<\/li>\n                <\/ul>\n              <\/li>\n              <li class=\"timeline-item reveal\">\n                <span class=\"timeline-date\">20XX \u2014 20XX<\/span>\n                <h5>Diplom \/ Ausbildung Game Development<\/h5>\n                <p class=\"timeline-org\">Akademie \/ Institut, Stadt<\/p>\n                <ul class=\"timeline-points\">\n                  <li>Praxisprojekte im Team, Rolle und Umfang.<\/li>\n                <\/ul>\n              <\/li>\n              <li class=\"timeline-item reveal\">\n                <span class=\"timeline-date\">20XX<\/span>\n                <h5>Zertifikat oder Kurs<\/h5>\n                <p class=\"timeline-org\">Anbieter<\/p>\n                <ul class=\"timeline-points\">\n                  <li>Warum relevant f\u00fcr die Stelle.<\/li>\n                <\/ul>\n              <\/li>\n            <\/ol>\n\n            <div class=\"cv-extras reveal\">\n              <div>\n                <h5>Sprachen<\/h5>\n                <p>Deutsch (Muttersprache) \u00b7 Englisch (C1) \u00b7 weitere Sprache<\/p>\n              <\/div>\n              <div>\n                <h5>Auszeichnungen<\/h5>\n                <p>Platzhalter f\u00fcr Preise, Nominierungen, Stipendien.<\/p>\n              <\/div>\n              <div>\n                <h5>Vortr\u00e4ge &amp; Community<\/h5>\n                <p>Talks, Jam-Orga, Mentoring, Uni-Gastvortr\u00e4ge.<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Detaillierte F\u00e4higkeiten -->\n        <h3 class=\"block-heading reveal\">F\u00e4higkeiten im Detail<\/h3>\n        <div class=\"skill-catalog\">\n          <div class=\"catalog-card reveal\">\n            <h4>Game-Design-F\u00e4higkeiten<\/h4>\n            <ul class=\"detail-list\">\n              <li>Systemdesign\n                <ul>\n                  <li>Core Loops, Progression und Freischaltungen<\/li>\n                  <li>Balancing \u00fcber Tabellen und Simulationen<\/li>\n                  <li>Economy- und Ressourcendesign<\/li>\n                <\/ul>\n              <\/li>\n              <li>Level Design\n                <ul>\n                  <li>Blockouts, Pacing und Sichtlinien<\/li>\n                  <li>Encounter-Design und Schwierigkeitskurven<\/li>\n                <\/ul>\n              <\/li>\n              <li>Narrative Design\n                <ul>\n                  <li>Dialogstrukturen und Verzweigungen<\/li>\n                  <li>Environmental Storytelling<\/li>\n                <\/ul>\n              <\/li>\n              <li>Playtesting und Auswertung von Feedback<\/li>\n            <\/ul>\n          <\/div>\n\n          <div class=\"catalog-card reveal\">\n            <h4>Engine-Kenntnisse<\/h4>\n            <ul class=\"detail-list\">\n              <li>Unity\n                <ul>\n                  <li>GameObjects, Komponenten und Prefabs<\/li>\n                  <li>Skripte in C# f\u00fcr Gameplay, Kollisionen, Audio, Events<\/li>\n                  <li>Animator, Partikelsysteme, UI-Aufbau<\/li>\n                  <li>Import und Verwaltung von Assets und Packages<\/li>\n                <\/ul>\n              <\/li>\n              <li>Unreal Engine\n                <ul>\n                  <li>Blueprints f\u00fcr Prototypen und Gameplay<\/li>\n                  <li>Level-Streaming und Blockouts<\/li>\n                <\/ul>\n              <\/li>\n              <li>Godot \u2014 Prototypen und kleine Eigenprojekte<\/li>\n            <\/ul>\n          <\/div>\n\n          <div class=\"catalog-card reveal\">\n            <h4>Technische F\u00e4higkeiten<\/h4>\n            <ul class=\"detail-list\">\n              <li>Programmierung\n                <ul>\n                  <li>C# inklusive objektorientierter Konzepte<\/li>\n                  <li>C++ Grundlagen<\/li>\n                  <li>Python f\u00fcr Tools und Datenauswertung<\/li>\n                <\/ul>\n              <\/li>\n              <li>Web-Grundlagen: HTML, CSS, JavaScript<\/li>\n              <li>Datenanalyse: Telemetrie, Tabellen, einfache Auswertungen<\/li>\n              <li>Versionsverwaltung mit Git und GitHub<\/li>\n            <\/ul>\n          <\/div>\n\n          <div class=\"catalog-card reveal\">\n            <h4>Teamarbeit &amp; Projektmanagement<\/h4>\n            <ul class=\"detail-list\">\n              <li>Agile Entwicklung mit Scrum, Sprints und Reviews<\/li>\n              <li>Projektplanung mit Jira, Trello oder Hack'n'Plan<\/li>\n              <li>Zusammenarbeit mit Art, Code, Audio und QA<\/li>\n              <li>Dokumentation in Confluence oder Notion<\/li>\n            <\/ul>\n          <\/div>\n\n          <div class=\"catalog-card reveal\">\n            <h4>Multimedia &amp; Gestaltung<\/h4>\n            <ul class=\"detail-list\">\n              <li>Bildbearbeitung und Illustration<\/li>\n              <li>Videoschnitt f\u00fcr Trailer und Devlogs<\/li>\n              <li>Grundlagen 3D-Modellierung<\/li>\n              <li>UI- und Wireframe-Gestaltung<\/li>\n            <\/ul>\n          <\/div>\n\n          <div class=\"catalog-card reveal\">\n            <h4>Weitere Kenntnisse<\/h4>\n            <ul class=\"detail-list\">\n              <li>UX-Methoden: Use-Cases, User Stories, Testszenarien<\/li>\n              <li>Datenbank-Grundlagen und SQL<\/li>\n              <li>Diagramme: Flowcharts, Zustandsdiagramme, UML<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n\n        <!-- Genutzte Software -->\n        <h3 class=\"block-heading reveal\">Genutzte Software<\/h3>\n        <ul class=\"tool-strip reveal\">\n          <li>Unity<\/li>\n          <li>Unreal<\/li>\n          <li>Godot<\/li>\n          <li>Blender<\/li>\n          <li>Photoshop<\/li>\n          <li>Illustrator<\/li>\n          <li>Premiere Pro<\/li>\n          <li>Figma<\/li>\n          <li>Miro<\/li>\n          <li>Visual Studio<\/li>\n          <li>Rider<\/li>\n          <li>Git \/ GitHub<\/li>\n          <li>Jira<\/li>\n          <li>Notion<\/li>\n        <\/ul>\n\n        <!-- Zertifikate -->\n        <h3 class=\"block-heading reveal\">Abschl\u00fcsse &amp; Zertifikate<\/h3>\n        <ul class=\"certificate-list\">\n          <li class=\"reveal\">\n            <div>\n              <strong>Bachelor \/ Master, Studienfach<\/strong>\n              <span>Hochschule, Stadt \u00b7 20XX<\/span>\n            <\/div>\n            <a href=\"#\" target=\"_blank\" rel=\"noopener\">Ansehen <span aria-hidden=\"true\">\u2197<\/span><\/a>\n          <\/li>\n          <li class=\"reveal\">\n            <div>\n              <strong>Diplom Professional Game Development<\/strong>\n              <span>Akademie \/ Institut \u00b7 20XX<\/span>\n            <\/div>\n            <a href=\"#\" target=\"_blank\" rel=\"noopener\">Ansehen <span aria-hidden=\"true\">\u2197<\/span><\/a>\n          <\/li>\n          <li class=\"reveal\">\n            <div>\n              <strong>Zertifikat: Kursname<\/strong>\n              <span>Anbieter \u00b7 20XX<\/span>\n            <\/div>\n            <a href=\"#\" target=\"_blank\" rel=\"noopener\">Ansehen <span aria-hidden=\"true\">\u2197<\/span><\/a>\n          <\/li>\n          <li class=\"reveal\">\n            <div>\n              <strong>Zertifikat: Kursname<\/strong>\n              <span>Anbieter \u00b7 20XX<\/span>\n            <\/div>\n            <a href=\"#\" target=\"_blank\" rel=\"noopener\">Ansehen <span aria-hidden=\"true\">\u2197<\/span><\/a>\n          <\/li>\n        <\/ul>\n      <\/div>\n    <\/section>\n\n    <!-- ============ 04 KREATIVRAUM ============ -->\n    <section class=\"section\" id=\"gdp-creative\">\n      <div class=\"container\">\n        <div class=\"section-head reveal\">\n          <span class=\"section-index\">04<\/span>\n          <h2 class=\"section-title\">Kreativraum<\/h2>\n          <p class=\"section-sub\">\n            Sketches, Notizen, verworfene Ideen und Making-of-Artikel \u2014 der unpolierte\n            Teil, in dem Design entsteht.\n          <\/p>\n        <\/div>\n\n        <div class=\"gallery\" id=\"gdp-gallery\">\n          <figure class=\"gallery-item reveal\" data-caption=\"Sketch 01 \u2014 Level-Layout, erste Skizze\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%20900%20700%22%20role%3D%22img%22%20aria-label%3D%22Sketch%20Level-Layout%22%3E%3Crect%20width%3D%22900%22%20height%3D%22700%22%20fill%3D%22%23e9e4d8%22\/%3E%3Cg%20stroke%3D%22%238a8272%22%20stroke-opacity%3D%220.35%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%2050H900M0%20100H900M0%20150H900M0%20200H900M0%20250H900M0%20300H900M0%20350H900M0%20400H900M0%20450H900M0%20500H900M0%20550H900M0%20600H900M0%20650H900%22\/%3E%3Cpath%20d%3D%22M50%200V700M100%200V700M150%200V700M200%200V700M250%200V700M300%200V700M350%200V700M400%200V700M450%200V700M500%200V700M550%200V700M600%200V700M650%200V700M700%200V700M750%200V700M800%200V700M850%200V700%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232b2a26%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M100%20550%20L100%20380%20L260%20380%20L260%20250%20L440%20250%20L440%20150%20L700%20150%20L700%20320%20L820%20320%20L820%20560%20L560%20560%20L560%20450%20L100%20450%22\/%3E%3Crect%20x%3D%22330%22%20y%3D%22330%22%20width%3D%2290%22%20height%3D%2270%22\/%3E%3Ccircle%20cx%3D%22740%22%20cy%3D%22230%22%20r%3D%2234%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23b3462f%22%20fill-opacity%3D%220.75%22%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%22500%22%20r%3D%2212%22\/%3E%3Ccircle%20cx%3D%22620%22%20cy%3D%22500%22%20r%3D%2212%22\/%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%22200%22%20r%3D%2212%22\/%3E%3C\/g%3E%3Cg%20stroke%3D%22%23b3462f%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%2210%208%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M140%20500%20L300%20420%20L480%20200%20L740%20230%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2260%22%20y%3D%2290%22%20font-family%3D%22monospace%22%20font-size%3D%2226%22%20fill%3D%22%232b2a26%22%3ELEVEL%2001%20%14%20LAYOUT%20\/%20FLOW%3C\/text%3E%3Ctext%20x%3D%2260%22%20y%3D%22655%22%20font-family%3D%22monospace%22%20font-size%3D%2218%22%20fill%3D%22%236b675c%22%3Estart%20%EF%BF%BD%20hub%20%EF%BF%BD%20arena%20%EF%BF%BD%20exit%3C\/text%3E%3C\/svg%3E\" alt=\"Sketch eines Level-Layouts\">\n            <figcaption>Level-Layout, Skizze<\/figcaption>\n          <\/figure>\n          <figure class=\"gallery-item reveal wide\" data-caption=\"Sketch 02 \u2014 Systemdiagramm eines Crafting-Loops\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%201200%20620%22%20role%3D%22img%22%20aria-label%3D%22Systemdiagramm%20Crafting-Loop%22%3E%3Crect%20width%3D%221200%22%20height%3D%22620%22%20fill%3D%22%23e9e4d8%22\/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232b2a26%22%20stroke-width%3D%222.5%22%3E%3Crect%20x%3D%2290%22%20y%3D%22240%22%20width%3D%22200%22%20height%3D%2290%22\/%3E%3Crect%20x%3D%22420%22%20y%3D%2290%22%20width%3D%22200%22%20height%3D%2290%22\/%3E%3Crect%20x%3D%22420%22%20y%3D%22400%22%20width%3D%22200%22%20height%3D%2290%22\/%3E%3Crect%20x%3D%22760%22%20y%3D%22240%22%20width%3D%22200%22%20height%3D%2290%22\/%3E%3C\/g%3E%3Cg%20font-family%3D%22monospace%22%20font-size%3D%2218%22%20fill%3D%22%232b2a26%22%20text-anchor%3D%22middle%22%3E%3Ctext%20x%3D%22190%22%20y%3D%22292%22%3EERKUNDEN%3C\/text%3E%3Ctext%20x%3D%22520%22%20y%3D%22142%22%3EROHSTOFFE%3C\/text%3E%3Ctext%20x%3D%22520%22%20y%3D%22452%22%3EWERKZEUG%3C\/text%3E%3Ctext%20x%3D%22860%22%20y%3D%22292%22%3ECRAFTING%3C\/text%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b3462f%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M290%20270%20L420%20150%22%20marker-end%3D%22url%28%23arrow%29%22\/%3E%3Cpath%20d%3D%22M620%20140%20L790%20250%22%20marker-end%3D%22url%28%23arrow%29%22\/%3E%3Cpath%20d%3D%22M860%20330%20L620%20430%22%20marker-end%3D%22url%28%23arrow%29%22\/%3E%3Cpath%20d%3D%22M420%20470%20L200%20335%22%20marker-end%3D%22url%28%23arrow%29%22\/%3E%3C\/g%3E%3Cdefs%3E%3Cmarker%20id%3D%22arrow%22%20viewBox%3D%220%200%2010%2010%22%20refX%3D%229%22%20refY%3D%225%22%20markerWidth%3D%227%22%20markerHeight%3D%227%22%20orient%3D%22auto-start-reverse%22%3E%3Cpath%20d%3D%22M0%200%20L10%205%20L0%2010%20z%22%20fill%3D%22%23b3462f%22\/%3E%3C\/marker%3E%3C\/defs%3E%3Ctext%20x%3D%2290%22%20y%3D%2260%22%20font-family%3D%22monospace%22%20font-size%3D%2224%22%20fill%3D%22%232b2a26%22%3ECORE%20LOOP%20%14%20CRAFTING%3C\/text%3E%3Ctext%20x%3D%2290%22%20y%3D%22580%22%20font-family%3D%22monospace%22%20font-size%3D%2216%22%20fill%3D%22%236b675c%22%3Eoffene%20Frage%3A%20wie%20oft%20darf%20der%20Loop%20brechen%3F%3C\/text%3E%3C\/svg%3E\" alt=\"Systemdiagramm eines Crafting-Loops\">\n            <figcaption>Systemdiagramm: Crafting-Loop<\/figcaption>\n          <\/figure>\n          <figure class=\"gallery-item reveal\" data-caption=\"Sketch 03 \u2014 Charakter-Silhouetten\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%20900%20700%22%20role%3D%22img%22%20aria-label%3D%22Charakter-Silhouetten%22%3E%3Crect%20width%3D%22900%22%20height%3D%22700%22%20fill%3D%22%23e9e4d8%22\/%3E%3Cg%20fill%3D%22%232b2a26%22%20fill-opacity%3D%220.85%22%3E%3Cpath%20d%3D%22M160%20600%20L160%20330%20Q160%20250%20210%20250%20Q260%20250%20260%20330%20L260%20600%20Z%22\/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22210%22%20r%3D%2244%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%232b2a26%22%20fill-opacity%3D%220.55%22%3E%3Cpath%20d%3D%22M400%20600%20L390%20340%20Q420%20240%20470%20260%20Q510%20280%20490%20360%20L500%20600%20Z%22\/%3E%3Ccircle%20cx%3D%22445%22%20cy%3D%22205%22%20r%3D%2250%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%232b2a26%22%20fill-opacity%3D%220.3%22%3E%3Cpath%20d%3D%22M660%20600%20L650%20380%20Q660%20280%20720%20290%20Q770%20300%20760%20390%20L770%20600%20Z%22\/%3E%3Ccircle%20cx%3D%22710%22%20cy%3D%22240%22%20r%3D%2256%22\/%3E%3C\/g%3E%3Cg%20stroke%3D%22%23b3462f%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%228%208%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M100%20600H820%22\/%3E%3C\/g%3E%3Cg%20font-family%3D%22monospace%22%20font-size%3D%2216%22%20fill%3D%22%236b675c%22%20text-anchor%3D%22middle%22%3E%3Ctext%20x%3D%22210%22%20y%3D%22640%22%3ESCOUT%3C\/text%3E%3Ctext%20x%3D%22445%22%20y%3D%22640%22%3EWARDEN%3C\/text%3E%3Ctext%20x%3D%22710%22%20y%3D%22640%22%3ECOLOSSUS%3C\/text%3E%3C\/g%3E%3Ctext%20x%3D%2260%22%20y%3D%2290%22%20font-family%3D%22monospace%22%20font-size%3D%2224%22%20fill%3D%22%232b2a26%22%3ESILHOUETTEN%20%14%20LESBARKEIT%3C\/text%3E%3C\/svg%3E\" alt=\"Charakter-Silhouetten\">\n            <figcaption>Charakter-Silhouetten<\/figcaption>\n          <\/figure>\n          <figure class=\"gallery-item reveal\" data-caption=\"Sketch 04 \u2014 UI-Wireframe f\u00fcr das Inventar\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%20900%20700%22%20role%3D%22img%22%20aria-label%3D%22UI-Wireframe%20Inventar%22%3E%3Crect%20width%3D%22900%22%20height%3D%22700%22%20fill%3D%22%23e9e4d8%22\/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232b2a26%22%20stroke-width%3D%222.5%22%3E%3Crect%20x%3D%2280%22%20y%3D%22120%22%20width%3D%22740%22%20height%3D%22480%22\/%3E%3Crect%20x%3D%22110%22%20y%3D%22170%22%20width%3D%22380%22%20height%3D%22380%22\/%3E%3Crect%20x%3D%22520%22%20y%3D%22170%22%20width%3D%22270%22%20height%3D%22230%22\/%3E%3Crect%20x%3D%22520%22%20y%3D%22430%22%20width%3D%22270%22%20height%3D%22120%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238a8272%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M110%20265H490M110%20360H490M110%20455H490M205%20170V550M300%20170V550M395%20170V550%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23b3462f%22%20fill-opacity%3D%220.5%22%3E%3Crect%20x%3D%22115%22%20y%3D%22175%22%20width%3D%2285%22%20height%3D%2285%22\/%3E%3Crect%20x%3D%22305%22%20y%3D%22270%22%20width%3D%2285%22%20height%3D%2285%22\/%3E%3C\/g%3E%3Cg%20font-family%3D%22monospace%22%20font-size%3D%2216%22%20fill%3D%22%236b675c%22%3E%3Ctext%20x%3D%22110%22%20y%3D%22150%22%3EINVENTAR%204x4%3C\/text%3E%3Ctext%20x%3D%22520%22%20y%3D%22150%22%3EDETAIL%3C\/text%3E%3Ctext%20x%3D%22530%22%20y%3D%22470%22%3EAKTIONEN%3C\/text%3E%3C\/g%3E%3Ctext%20x%3D%2280%22%20y%3D%2290%22%20font-family%3D%22monospace%22%20font-size%3D%2224%22%20fill%3D%22%232b2a26%22%3EUI%20WIREFRAME%20%14%20INVENTORY%3C\/text%3E%3Ctext%20x%3D%2280%22%20y%3D%22650%22%20font-family%3D%22monospace%22%20font-size%3D%2216%22%20fill%3D%22%236b675c%22%3ERegel%3A%20max.%202%20Klicks%20bis%20zur%20Ausr%EF%BF%BDstung%3C\/text%3E%3C\/svg%3E\" alt=\"UI-Wireframe f\u00fcr ein Inventar\">\n            <figcaption>UI-Wireframe: Inventar<\/figcaption>\n          <\/figure>\n          <figure class=\"gallery-item reveal tall\" data-caption=\"Sketch 05 \u2014 Moodboard einer Spielwelt\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%20700%201000%22%20role%3D%22img%22%20aria-label%3D%22Moodboard%20Spielwelt%22%3E%3Crect%20width%3D%22700%22%20height%3D%221000%22%20fill%3D%22%23e9e4d8%22\/%3E%3Cg%20fill%3D%22%232b2a26%22%20fill-opacity%3D%220.12%22%3E%3Crect%20x%3D%2260%22%20y%3D%22120%22%20width%3D%22260%22%20height%3D%22200%22\/%3E%3Crect%20x%3D%22360%22%20y%3D%22120%22%20width%3D%22280%22%20height%3D%22120%22\/%3E%3Crect%20x%3D%22360%22%20y%3D%22270%22%20width%3D%22280%22%20height%3D%22200%22\/%3E%3Crect%20x%3D%2260%22%20y%3D%22360%22%20width%3D%22260%22%20height%3D%22110%22\/%3E%3Crect%20x%3D%2260%22%20y%3D%22510%22%20width%3D%22580%22%20height%3D%22220%22\/%3E%3Crect%20x%3D%2260%22%20y%3D%22770%22%20width%3D%22270%22%20height%3D%22160%22\/%3E%3Crect%20x%3D%22370%22%20y%3D%22770%22%20width%3D%22270%22%20height%3D%22160%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232b2a26%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%220.6%22%3E%3Crect%20x%3D%2260%22%20y%3D%22120%22%20width%3D%22260%22%20height%3D%22200%22\/%3E%3Crect%20x%3D%22360%22%20y%3D%22120%22%20width%3D%22280%22%20height%3D%22120%22\/%3E%3Crect%20x%3D%22360%22%20y%3D%22270%22%20width%3D%22280%22%20height%3D%22200%22\/%3E%3Crect%20x%3D%2260%22%20y%3D%22360%22%20width%3D%22260%22%20height%3D%22110%22\/%3E%3Crect%20x%3D%2260%22%20y%3D%22510%22%20width%3D%22580%22%20height%3D%22220%22\/%3E%3Crect%20x%3D%2260%22%20y%3D%22770%22%20width%3D%22270%22%20height%3D%22160%22\/%3E%3Crect%20x%3D%22370%22%20y%3D%22770%22%20width%3D%22270%22%20height%3D%22160%22\/%3E%3C\/g%3E%3Cg%20stroke%3D%22%23b3462f%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M60%20600%20L200%20540%20L340%20620%20L470%20545%20L640%20610%22\/%3E%3C\/g%3E%3Cg%20fill%3D%22%23b3462f%22%20fill-opacity%3D%220.6%22%3E%3Ccircle%20cx%3D%22560%22%20cy%3D%22180%22%20r%3D%2226%22\/%3E%3C\/g%3E%3Ctext%20x%3D%2260%22%20y%3D%2290%22%20font-family%3D%22monospace%22%20font-size%3D%2222%22%20fill%3D%22%232b2a26%22%3EMOODBOARD%20%14%20WELT%3C\/text%3E%3Ctext%20x%3D%2260%22%20y%3D%22975%22%20font-family%3D%22monospace%22%20font-size%3D%2216%22%20fill%3D%22%236b675c%22%3Ewarm%2C%20verlassen%2C%20vertikal%3C\/text%3E%3C\/svg%3E\" alt=\"Moodboard einer Spielwelt\">\n            <figcaption>Moodboard: Spielwelt<\/figcaption>\n          <\/figure>\n          <figure class=\"gallery-item reveal\" data-caption=\"Sketch 06 \u2014 Notizen aus einem Playtest\">\n            <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%20900%20700%22%20role%3D%22img%22%20aria-label%3D%22Playtest-Notizen%22%3E%3Crect%20width%3D%22900%22%20height%3D%22700%22%20fill%3D%22%23f0ead9%22\/%3E%3Cg%20stroke%3D%22%23c3bba6%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20160H900M0%20220H900M0%20280H900M0%20340H900M0%20400H900M0%20460H900M0%20520H900M0%20580H900%22\/%3E%3C\/g%3E%3Cpath%20d%3D%22M120%200V700%22%20stroke%3D%22%23b3462f%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222%22\/%3E%3Cg%20font-family%3D%22monospace%22%20font-size%3D%2220%22%20fill%3D%22%232b2a26%22%3E%3Ctext%20x%3D%22150%22%20y%3D%22105%22%3EPLAYTEST%20%2307%20%14%206%20SPIELER%3C\/text%3E%3C\/g%3E%3Cg%20font-family%3D%22monospace%22%20font-size%3D%2217%22%20fill%3D%22%233d3b34%22%3E%3Ctext%20x%3D%22150%22%20y%3D%22215%22%3E%2B%20Tutorial%20ohne%20Text%20verstanden%20%285\/6%29%3C\/text%3E%3Ctext%20x%3D%22150%22%20y%3D%22275%22%3E-%20Boss-Phase%202%20zu%20lang%2C%20Aufmerksamkeit%20bricht%3C\/text%3E%3Ctext%20x%3D%22150%22%20y%3D%22335%22%3E-%204\/6%20finden%20den%20zweiten%20Ausgang%20nicht%3C\/text%3E%3Ctext%20x%3D%22150%22%20y%3D%22395%22%3E%2B%20Crafting%20wird%20freiwillig%20wiederholt%3C\/text%3E%3Ctext%20x%3D%22150%22%20y%3D%22455%22%3E%3F%20Ist%20die%20Karte%20%EF%BF%BDberhaupt%20n%EF%BF%BDtig%3F%3C\/text%3E%3C\/g%3E%3Cg%20font-family%3D%22monospace%22%20font-size%3D%2217%22%20fill%3D%22%23b3462f%22%3E%3Ctext%20x%3D%22150%22%20y%3D%22545%22%3ETODO%3A%20Sichtlinie%20zum%20Ausgang%20%EF%BF%BDffnen%3C\/text%3E%3Ctext%20x%3D%22150%22%20y%3D%22595%22%3ETODO%3A%20Phase%202%20von%2090s%20auf%2045s%3C\/text%3E%3C\/g%3E%3Crect%20x%3D%22140%22%20y%3D%22520%22%20width%3D%22470%22%20height%3D%2240%22%20fill%3D%22none%22%20stroke%3D%22%23b3462f%22%20stroke-width%3D%222%22%20stroke-opacity%3D%220.5%22\/%3E%3C\/svg%3E\" alt=\"Handschriftliche Playtest-Notizen\">\n            <figcaption>Playtest-Notizen<\/figcaption>\n          <\/figure>\n        <\/div>\n\n        <!-- Making-of \/ Breakdowns -->\n        <h3 class=\"block-heading reveal\" id=\"gdp-breakdowns\">Making-of &amp; Breakdowns<\/h3>\n        <p class=\"block-intro reveal\">\n          Ausf\u00fchrliche Artikel dar\u00fcber, wie einzelne Systeme entstanden sind \u2014 von der\n          ersten Skizze bis zur fertigen Umsetzung.\n        <\/p>\n        <div class=\"breakdown-grid\">\n          <a class=\"breakdown-card reveal\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n            <span class=\"breakdown-index\">01<\/span>\n            <h4>Wie ich den Dungeon-Generator gebaut habe<\/h4>\n            <p>\n              Regelsatz, R\u00e4ume, Verbindungen \u2014 und wie sich Designabsicht trotz Zufall\n              erhalten l\u00e4sst.\n            <\/p>\n            <span class=\"breakdown-more\">Artikel lesen \u2197<\/span>\n          <\/a>\n          <a class=\"breakdown-card reveal\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n            <span class=\"breakdown-index\">02<\/span>\n            <h4>Wie ich den H\u00f6hlen-Generator gebaut habe<\/h4>\n            <p>\n              Cellular Automata, Nachbearbeitung und Lesbarkeit organischer R\u00e4ume.\n            <\/p>\n            <span class=\"breakdown-more\">Artikel lesen \u2197<\/span>\n          <\/a>\n          <a class=\"breakdown-card reveal\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n            <span class=\"breakdown-index\">03<\/span>\n            <h4>Vom Whiteboard zum Combat-System<\/h4>\n            <p>\n              Wie aus einer Skizze \u00fcber f\u00fcnf Iterationen ein sp\u00fcrbares Kampfgef\u00fchl wurde.\n            <\/p>\n            <span class=\"breakdown-more\">Artikel lesen \u2197<\/span>\n          <\/a>\n        <\/div>\n\n        <div class=\"idea-grid\">\n          <div class=\"idea-card reveal\">\n            <h3>Ideen-Notizbuch<\/h3>\n            <p>\n              Drei bis f\u00fcnf Zeilen aus deinem Notizbuch: eine Mechanik-Idee, eine Frage,\n              die dich besch\u00e4ftigt, ein Genre, das du neu denken willst.\n            <\/p>\n          <\/div>\n          <div class=\"idea-card reveal\">\n            <h3>Was ich gerade lerne<\/h3>\n            <p>\n              Aktuelles Lernthema \u2014 Engine-Feature, Tool, Theorie, Buch. Zeigt Neugier\n              und Entwicklung \u00fcber die Zeit.\n            <\/p>\n          <\/div>\n          <div class=\"idea-card reveal\">\n            <h3>Inspiration<\/h3>\n            <p>\n              Spiele, Filme, B\u00fccher, Orte, die deine Designsprache pr\u00e4gen \u2014 kurz begr\u00fcndet,\n              nicht nur aufgelistet.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ============ 05 KONTAKT ============ -->\n    <section class=\"section section-alt\" id=\"gdp-contact\">\n      <div class=\"container\">\n        <div class=\"section-head reveal center\">\n          <span class=\"section-index\">05<\/span>\n          <h2 class=\"section-title\">Kontakt<\/h2>\n          <p class=\"section-sub\">\n            F\u00fcr Stellenangebote, Projektanfragen oder R\u00fcckfragen zu meinen Arbeiten\n            erreichst du mich am schnellsten per E-Mail.\n          <\/p>\n        <\/div>\n\n        <div class=\"contact-layout\">\n          <div class=\"contact-direct reveal\">\n            <a class=\"contact-mail\" href=\"mailto:mail@beispiel.de\">mail@beispiel.de<\/a>\n            <ul class=\"contact-details\">\n              <li><span>Telefon<\/span> +49 000 0000000<\/li>\n              <li><span>Standort<\/span> Stadt, Land<\/li>\n              <li><span>Antwortzeit<\/span> in der Regel innerhalb von 24 Stunden<\/li>\n            <\/ul>\n            <ul class=\"contact-links\">\n              <li><a href=\"#\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a><\/li>\n              <li><a href=\"#\" target=\"_blank\" rel=\"noopener\">itch.io<\/a><\/li>\n              <li><a href=\"#\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/li>\n              <li><a href=\"#\" download>Lebenslauf<\/a><\/li>\n            <\/ul>\n          <\/div>\n\n          <form class=\"contact-form reveal\" id=\"gdp-contactForm\" novalidate>\n            <p class=\"form-row\">\n              <label for=\"gdp-fieldName\">Name<\/label>\n              <input type=\"text\" id=\"gdp-fieldName\" name=\"name\" required autocomplete=\"name\">\n            <\/p>\n            <p class=\"form-row\">\n              <label for=\"gdp-fieldMail\">E-Mail<\/label>\n              <input type=\"email\" id=\"gdp-fieldMail\" name=\"email\" required autocomplete=\"email\">\n            <\/p>\n            <p class=\"form-row\">\n              <label for=\"gdp-fieldSubject\">Betreff<\/label>\n              <input type=\"text\" id=\"gdp-fieldSubject\" name=\"subject\">\n            <\/p>\n            <p class=\"form-row\">\n              <label for=\"gdp-fieldMessage\">Nachricht<\/label>\n              <textarea id=\"gdp-fieldMessage\" name=\"message\" rows=\"5\" required><\/textarea>\n            <\/p>\n            <button class=\"btn btn-primary\" type=\"submit\">Nachricht senden<\/button>\n            <span class=\"form-hint\" id=\"gdp-formHint\" role=\"status\">\n              Dummy-Formular \u2014 noch ohne Versand. Backend oder Dienst wie Formspree erg\u00e4nzen.\n            <\/span>\n          <\/form>\n        <\/div>\n      <\/div>\n    <\/section>\n\n  <\/main>\n\n  <footer class=\"site-footer\">\n    <div class=\"container footer-inner\">\n      <p>\u00a9 <span id=\"gdp-year\">2026<\/span> Vorname Nachname<\/p>\n      <p><a href=\"#\">Impressum<\/a> \u00b7 <a href=\"#\">Datenschutz<\/a><\/p>\n    <\/div>\n  <\/footer>\n\n  <!-- ============ LIGHTBOX ============ -->\n  <div class=\"lightbox\" id=\"gdp-lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Bildansicht\" hidden>\n    <button class=\"lightbox-close\" id=\"gdp-lightboxClose\" aria-label=\"Schlie\u00dfen\">\u00d7<\/button>\n    <button class=\"lightbox-nav prev\" id=\"gdp-lightboxPrev\" aria-label=\"Vorheriges Bild\">\u2039<\/button>\n    <figure class=\"lightbox-figure\">\n      <img decoding=\"async\" id=\"gdp-lightboxImage\" src=\"\" alt=\"\">\n      <figcaption id=\"gdp-lightboxCaption\"><\/figcaption>\n    <\/figure>\n    <button class=\"lightbox-nav next\" id=\"gdp-lightboxNext\" aria-label=\"N\u00e4chstes Bild\">\u203a<\/button>\n  <\/div>\n<\/div>\n\n<script>\n\/* =========================================================\n   Game Designer Portfolio \u2014 Interaktion\n   Module: Header \u00b7 Mobile-Navigation \u00b7 Active-Link \u00b7\n           Scroll-Reveal \u00b7 Projektfilter \u00b7 Lightbox \u00b7 Jahr\n   Ohne externe Abh\u00e4ngigkeiten.\n   ========================================================= *\/\n\n(function () {\n  \"use strict\";\n\n  \/* ---------- Header: Hintergrund + Scroll-Fortschritt ---------- *\/\n  function initHeader() {\n    const header = document.getElementById(\"gdp-siteHeader\");\n    const progress = document.getElementById(\"gdp-scrollProgress\");\n    if (!header) return;\n\n    let queued = false;\n\n    function update() {\n      const top = window.scrollY;\n      header.classList.toggle(\"is-stuck\", top > 40);\n\n      if (progress) {\n        const scrollable = document.documentElement.scrollHeight - window.innerHeight;\n        const ratio = scrollable > 0 ? top \/ scrollable : 0;\n        progress.style.width = (ratio * 100).toFixed(2) + \"%\";\n      }\n      queued = false;\n    }\n\n    window.addEventListener(\"scroll\", function () {\n      if (!queued) {\n        queued = true;\n        window.requestAnimationFrame(update);\n      }\n    }, { passive: true });\n\n    update();\n  }\n\n  \/* ---------- Mobile-Navigation ---------- *\/\n  function initMobileNav() {\n    const toggle = document.getElementById(\"gdp-navToggle\");\n    const nav = document.getElementById(\"gdp-nav\");\n    if (!toggle || !nav) return;\n\n    function close() {\n      nav.classList.remove(\"is-open\");\n      toggle.setAttribute(\"aria-expanded\", \"false\");\n      toggle.setAttribute(\"aria-label\", \"Men\u00fc \u00f6ffnen\");\n    }\n\n    toggle.addEventListener(\"click\", function () {\n      const open = nav.classList.toggle(\"is-open\");\n      toggle.setAttribute(\"aria-expanded\", String(open));\n      toggle.setAttribute(\"aria-label\", open ? \"Men\u00fc schlie\u00dfen\" : \"Men\u00fc \u00f6ffnen\");\n    });\n\n    nav.addEventListener(\"click\", function (event) {\n      if (event.target.closest(\"a\")) close();\n    });\n\n    document.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Escape\") close();\n    });\n  }\n\n  \/* ---------- Aktiver Navigationspunkt ---------- *\/\n  function initActiveLink() {\n    const links = Array.from(document.querySelectorAll(\".nav a[href^='#']\"));\n    const sections = links\n      .map(function (link) {\n        const id = link.getAttribute(\"href\").slice(1);\n        const section = document.getElementById(id);\n        return section ? { link: link, section: section } : null;\n      })\n      .filter(Boolean);\n\n    if (!sections.length || !(\"IntersectionObserver\" in window)) return;\n\n    const observer = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        const match = sections.find(function (item) {\n          return item.section === entry.target;\n        });\n        if (!match) return;\n\n        if (entry.isIntersecting) {\n          links.forEach(function (link) { link.classList.remove(\"is-active\"); });\n          match.link.classList.add(\"is-active\");\n        }\n      });\n    }, { rootMargin: \"-45% 0px -50% 0px\" });\n\n    sections.forEach(function (item) { observer.observe(item.section); });\n  }\n\n  \/* ---------- Scroll-Reveal ---------- *\/\n  function initReveal() {\n    const items = document.querySelectorAll(\"#gdp .reveal\");\n    if (!items.length) return;\n\n    if (!(\"IntersectionObserver\" in window)) {\n      items.forEach(function (item) { item.classList.add(\"is-visible\"); });\n      return;\n    }\n\n    const observer = new IntersectionObserver(function (entries, obs) {\n      entries.forEach(function (entry, index) {\n        if (!entry.isIntersecting) return;\n        \/\/ Leichter Versatz, damit Gruppen nacheinander erscheinen.\n        entry.target.style.transitionDelay = (index * 70) + \"ms\";\n        entry.target.classList.add(\"is-visible\");\n        obs.unobserve(entry.target);\n      });\n    }, { threshold: 0.12, rootMargin: \"0px 0px -8% 0px\" });\n\n    items.forEach(function (item) { observer.observe(item); });\n  }\n\n  \/* ---------- Projektfilter ---------- *\/\n  function initFilter() {\n    const buttons = document.querySelectorAll(\"#gdp .filter\");\n    const cards = document.querySelectorAll(\"#gdp-workGrid .work-card\");\n    if (!buttons.length || !cards.length) return;\n\n    buttons.forEach(function (button) {\n      button.addEventListener(\"click\", function () {\n        const filter = button.dataset.filter;\n\n        buttons.forEach(function (other) { other.classList.remove(\"is-active\"); });\n        button.classList.add(\"is-active\");\n\n        cards.forEach(function (card) {\n          const show = filter === \"all\" || card.dataset.category === filter;\n          card.classList.toggle(\"is-hidden\", !show);\n        });\n      });\n    });\n  }\n\n  \/* ---------- Lightbox f\u00fcr den Kreativraum ---------- *\/\n  function initLightbox() {\n    const lightbox = document.getElementById(\"gdp-lightbox\");\n    const image = document.getElementById(\"gdp-lightboxImage\");\n    const caption = document.getElementById(\"gdp-lightboxCaption\");\n    const btnClose = document.getElementById(\"gdp-lightboxClose\");\n    const btnPrev = document.getElementById(\"gdp-lightboxPrev\");\n    const btnNext = document.getElementById(\"gdp-lightboxNext\");\n    const items = Array.from(document.querySelectorAll(\"#gdp .gallery-item\"));\n\n    if (!lightbox || !image || !items.length) return;\n\n    let current = 0;\n    let lastFocused = null;\n\n    function show(index) {\n      current = (index + items.length) % items.length;\n      const item = items[current];\n      const source = item.querySelector(\"img\");\n\n      image.src = source.getAttribute(\"src\");\n      image.alt = source.getAttribute(\"alt\") || \"\";\n      caption.textContent = item.dataset.caption || source.getAttribute(\"alt\") || \"\";\n    }\n\n    function open(index) {\n      lastFocused = document.activeElement;\n      show(index);\n      lightbox.hidden = false;\n      document.body.style.overflow = \"hidden\";\n      window.requestAnimationFrame(function () {\n        lightbox.classList.add(\"is-open\");\n      });\n      btnClose.focus();\n    }\n\n    function close() {\n      lightbox.classList.remove(\"is-open\");\n      document.body.style.overflow = \"\";\n      window.setTimeout(function () {\n        lightbox.hidden = true;\n        image.src = \"\";\n      }, 300);\n      if (lastFocused) lastFocused.focus();\n    }\n\n    items.forEach(function (item, index) {\n      item.setAttribute(\"tabindex\", \"0\");\n      item.setAttribute(\"role\", \"button\");\n\n      item.addEventListener(\"click\", function () { open(index); });\n      item.addEventListener(\"keydown\", function (event) {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          open(index);\n        }\n      });\n    });\n\n    btnClose.addEventListener(\"click\", close);\n    btnPrev.addEventListener(\"click\", function () { show(current - 1); });\n    btnNext.addEventListener(\"click\", function () { show(current + 1); });\n\n    lightbox.addEventListener(\"click\", function (event) {\n      if (event.target === lightbox) close();\n    });\n\n    document.addEventListener(\"keydown\", function (event) {\n      if (lightbox.hidden) return;\n      if (event.key === \"Escape\") close();\n      if (event.key === \"ArrowLeft\") show(current - 1);\n      if (event.key === \"ArrowRight\") show(current + 1);\n    });\n  }\n\n  \/* ---------- Kontaktformular (Dummy) ----------\n     Kein Versand: Der Absenden-Vorgang wird abgefangen und nur best\u00e4tigt.\n     F\u00fcr den Echtbetrieb `action`\/`method` setzen oder einen Dienst anbinden. *\/\n  function initContactForm() {\n    const form = document.getElementById(\"gdp-contactForm\");\n    const hint = document.getElementById(\"gdp-formHint\");\n    if (!form || !hint) return;\n\n    const defaultHint = hint.textContent;\n\n    form.addEventListener(\"submit\", function (event) {\n      event.preventDefault();\n\n      if (!form.checkValidity()) {\n        hint.classList.remove(\"is-success\");\n        hint.textContent = \"Bitte Name, E-Mail und Nachricht ausf\u00fcllen.\";\n        form.reportValidity();\n        return;\n      }\n\n      hint.classList.add(\"is-success\");\n      hint.textContent = \"Danke \u2014 im Dummy wird nichts versendet. Backend erg\u00e4nzen.\";\n      form.reset();\n\n      window.setTimeout(function () {\n        hint.classList.remove(\"is-success\");\n        hint.textContent = defaultHint;\n      }, 6000);\n    });\n  }\n\n  \/* ---------- Jahr im Footer ---------- *\/\n  function initYear() {\n    const year = document.getElementById(\"gdp-year\");\n    if (year) year.textContent = String(new Date().getFullYear());\n  }\n\n  function gdpBoot() {\n    if (window.__gdpPortfolioBooted) return;\n    window.__gdpPortfolioBooted = true;\n    initHeader();\n    initMobileNav();\n    initActiveLink();\n    initReveal();\n    initFilter();\n    initLightbox();\n    initContactForm();\n    initYear();\n  }\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", gdpBoot);\n  } else {\n    gdpBoot();\n  }\n})();\n\n<\/script>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VN Vorname Nachname \u00dcber mich Arbeiten Resume Kreativraum Kontakt Bewerbung als Game Designer Ich baue Systeme, die sich lebendig anf\u00fchlen. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alleswaskunstist.de\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alleswaskunstist.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alleswaskunstist.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alleswaskunstist.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alleswaskunstist.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":4,"href":"https:\/\/alleswaskunstist.de\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/alleswaskunstist.de\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/alleswaskunstist.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}