{"id":2,"date":"2026-03-11T17:08:15","date_gmt":"2026-03-11T16:08:15","guid":{"rendered":"http:\/\/danielrheinit.de\/?page_id=2"},"modified":"2026-03-14T10:48:26","modified_gmt":"2026-03-14T09:48:26","slug":"beispiel-seite","status":"publish","type":"page","link":"https:\/\/danielrheinit.de\/","title":{"rendered":"\u00dcber"},"content":{"rendered":"\n<style>\n    \n    :root {\n      --bg: #0d0f14;\n      --surface: #13161e;\n      --surface2: #1a1e2a;\n      --border: rgba(255,255,255,0.07);\n      --accent: #5d4fff;\n      --accent2: #7b5cff;\n      --text: #003ffc;\n      --muted: #404754;\n      --godot: #478cbf;\n    }\n\n    html { scroll-behavior: smooth; }\n\n    body {\n      background: var(--bg);\n      color: var(--text);\n      font-family: 'DM Sans', sans-serif;\n      font-size: 16px;\n      line-height: 1.6;\n      overflow-x: hidden;\n    }\n\n    \/* \u2500\u2500 NOISE OVERLAY \u2500\u2500 *\/\n    body::before {\n      content: '';\n      position: fixed;\n      inset: 0;\n      background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'\/%3E%3C\/svg%3E\");\n      pointer-events: none;\n      z-index: 9999;\n      opacity: 0.4;\n    }\n\n    \/* \u2500\u2500 GRID BACKGROUND \u2500\u2500 *\/\n    body::after {\n      content: '';\n      position: fixed;\n      inset: 0;\n      background-image:\n        linear-gradient(rgba(78,255,176,0.03) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(78,255,176,0.03) 1px, transparent 1px);\n      background-size: 48px 48px;\n      pointer-events: none;\n      z-index: 0;\n    }\n\n    \/* \u2500\u2500 NAV \u2500\u2500 *\/\n    nav {\n      position: fixed;\n      top: 0; left: 0; right: 0;\n      z-index: 100;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.2rem 2.5rem;\n      background: rgba(13,15,20,0.85);\n      backdrop-filter: blur(12px);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .nav-logo {\n      font-family: 'Space Mono', monospace;\n      font-size: 1rem;\n      color: var(--accent);\n      text-decoration: none;\n      letter-spacing: 0.05em;\n    }\n    .nav-logo span { color: var(--muted); }\n\n    .nav-links {\n      display: flex;\n      gap: 2rem;\n      list-style: none;\n    }\n    .nav-links a {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.75rem;\n      color: var(--muted);\n      text-decoration: none;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      transition: color 0.2s;\n    }\n    .nav-links a:hover { color: var(--accent); }\n\n    .nav-cta {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.75rem;\n      color: var(--bg);\n      background: var(--accent);\n      border: none;\n      padding: 0.55rem 1.2rem;\n      cursor: pointer;\n      text-decoration: none;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      transition: opacity 0.2s;\n    }\n    .nav-cta:hover { opacity: 0.85; }\n\n    \/* \u2500\u2500 HERO \u2500\u2500 *\/\n    .hero {\n      position: relative;\n      z-index: 1;\n      min-height: 100vh;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      align-items: center;\n      gap: 4rem;\n      padding: 8rem 2.5rem 4rem;\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    .hero-label {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.7rem;\n      color: var(--accent);\n      letter-spacing: 0.2em;\n      text-transform: uppercase;\n      margin-bottom: 1.2rem;\n      display: flex;\n      align-items: center;\n      gap: 0.6rem;\n    }\n    .hero-label::before {\n      content: '';\n      display: block;\n      width: 2rem;\n      height: 1px;\n      background: var(--accent);\n    }\n\n    .hero h1 {\n      font-family: 'Syne', sans-serif;\n      font-size: clamp(2.8rem, 5vw, 4.5rem);\n      font-weight: 800;\n      line-height: 1.05;\n      letter-spacing: -0.02em;\n      margin-bottom: 1.5rem;\n    }\n\n    .hero h1 .line-accent {\n      color: var(--accent);\n      display: block;\n    }\n    .hero h1 .line-dim {\n      color: var(--muted);\n      display: block;\n      font-weight: 400;\n      font-size: 70%;\n    }\n\n    .hero-desc {\n      font-size: 1.05rem;\n      color: #9ca3af;\n      max-width: 420px;\n      margin-bottom: 2.5rem;\n      line-height: 1.75;\n    }\n\n    .hero-actions {\n      display: flex;\n      gap: 1rem;\n      flex-wrap: wrap;\n    }\n\n    .btn-primary {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.8rem;\n      background: var(--accent);\n      color: var(--bg);\n      padding: 0.85rem 1.8rem;\n      text-decoration: none;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      transition: transform 0.15s, box-shadow 0.15s;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n    .btn-primary:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 30px rgba(78,255,176,0.25);\n    }\n\n    .btn-ghost {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.8rem;\n      background: transparent;\n      color: var(--text);\n      padding: 0.85rem 1.8rem;\n      text-decoration: none;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      border: 1px solid var(--border);\n      transition: border-color 0.2s, color 0.2s;\n    }\n    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }\n\n    \/* \u2500\u2500 HERO VISUAL \u2500\u2500 *\/\n    .hero-visual {\n      position: relative;\n    }\n\n    .terminal-card {\n      background: var(--surface);\n      border: 1px solid var(--border);\n      border-radius: 4px;\n      overflow: hidden;\n      box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(78,255,176,0.08);\n      animation: float 6s ease-in-out infinite;\n    }\n\n    @keyframes float {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-10px); }\n    }\n\n    .terminal-header {\n      background: var(--surface2);\n      padding: 0.75rem 1rem;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      border-bottom: 1px solid var(--border);\n    }\n    .dot { width: 10px; height: 10px; border-radius: 50%; }\n    .dot-r { background: #ff5f57; }\n    .dot-y { background: #febc2e; }\n    .dot-g { background: #28c840; }\n    .terminal-title {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.7rem;\n      color: var(--muted);\n      margin-left: 0.5rem;\n    }\n\n    .terminal-body {\n      padding: 1.5rem;\n      font-family: 'Space Mono', monospace;\n      font-size: 0.82rem;\n      line-height: 2;\n    }\n\n    .t-comment { color: #4b5563; }\n    .t-key { color: var(--godot); }\n    .t-val { color: var(--accent); }\n    .t-str { color: #f9a825; }\n    .t-num { color: #f48fb1; }\n    .t-cursor {\n      display: inline-block;\n      width: 8px; height: 1em;\n      background: var(--accent);\n      animation: blink 1.1s step-end infinite;\n      vertical-align: middle;\n      margin-left: 2px;\n    }\n    @keyframes blink { 50% { opacity: 0; } }\n\n    .glow-blob {\n      position: absolute;\n      width: 300px; height: 300px;\n      border-radius: 50%;\n      filter: blur(80px);\n      opacity: 0.12;\n      pointer-events: none;\n    }\n    .blob-1 { background: var(--accent); top: -60px; right: -60px; }\n    .blob-2 { background: var(--accent2); bottom: -40px; left: -40px; }\n\n    \/* \u2500\u2500 STATS BAR \u2500\u2500 *\/\n    .stats-bar {\n      position: relative;\n      z-index: 1;\n      border-top: 1px solid var(--border);\n      border-bottom: 1px solid var(--border);\n      background: var(--surface);\n      padding: 2rem 2.5rem;\n    }\n    .stats-inner {\n      max-width: 1200px;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 2rem;\n      text-align: center;\n    }\n    .stat-num {\n      font-family: 'Syne', sans-serif;\n      font-size: 2.2rem;\n      font-weight: 800;\n      color: var(--accent);\n      display: block;\n    }\n    .stat-label {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.65rem;\n      color: var(--muted);\n      text-transform: uppercase;\n      letter-spacing: 0.12em;\n    }\n\n    \/* \u2500\u2500 SECTION \u2500\u2500 *\/\n    section {\n      position: relative;\n      z-index: 1;\n    }\n\n    .section-inner {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 6rem 2.5rem;\n    }\n\n    .section-tag {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.7rem;\n      color: var(--accent);\n      letter-spacing: 0.18em;\n      text-transform: uppercase;\n      margin-bottom: 0.75rem;\n    }\n\n    .section-title {\n      font-family: 'Syne', sans-serif;\n      font-size: clamp(1.8rem, 3vw, 2.8rem);\n      font-weight: 800;\n      color: #dac747;\n      letter-spacing: -0.02em;\n      margin-bottom: 1rem;\n    }\n    .section-sub {\n      color: var(--muted);\n      max-width: 500px;\n      margin-bottom: 3.5rem;\n    }\n\n    \/* \u2500\u2500 ABOUT \u2500\u2500 *\/\n    .about-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 5rem;\n      align-items: center;\n    }\n    .about-img-wrap {\n      position: relative;\n    }\n    .about-avatar {\n      width: 100%;\n      aspect-ratio: 1;\n      background: var(--surface2);\n      border: 1px solid var(--border);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 6rem;\n      position: relative;\n      overflow: hidden;\n    }\n    .about-avatar::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(135deg, rgba(78,255,176,0.08), transparent 60%);\n    }\n    .about-accent-box {\n      position: absolute;\n      bottom: -1rem;\n      right: -1rem;\n      width: 80px; height: 80px;\n      border: 2px solid var(--accent);\n      z-index: -1;\n    }\n    .tag-row {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.6rem;\n      margin-top: 1.5rem;\n    }\n    .tag {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.68rem;\n      padding: 0.4rem 0.8rem;\n      border: 1px solid var(--border);\n      color: var(--muted);\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      transition: border-color 0.2s, color 0.2s;\n    }\n    .tag:hover { border-color: var(--accent); color: var(--accent); }\n    .tag.active { border-color: var(--accent); color: var(--accent); background: rgba(78,255,176,0.06); }\n\n    \/* \u2500\u2500 PROJECTS \u2500\u2500 *\/\n    .projects-bg { background: var(--surface); }\n    .projects-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 1.5rem;\n    }\n    .project-card {\n      background: var(--bg);\n      border: 1px solid var(--border);\n      padding: 1.8rem;\n      transition: border-color 0.25s, transform 0.25s;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n    }\n    .project-card::before {\n      content: '';\n      position: absolute;\n      top: 0; left: 0; right: 0;\n      height: 2px;\n      background: linear-gradient(90deg, var(--accent), var(--accent2));\n      transform: scaleX(0);\n      transform-origin: left;\n      transition: transform 0.3s;\n    }\n    .project-card:hover { border-color: rgba(78,255,176,0.3); transform: translateY(-4px); }\n    .project-card:hover::before { transform: scaleX(1); }\n    .project-icon {\n      font-size: 2rem;\n      margin-bottom: 1rem;\n      display: block;\n    }\n    .project-title {\n      font-family: 'Syne', sans-serif;\n      font-size: 1.1rem;\n      font-weight: 700;\n      margin-bottom: 0.5rem;\n    }\n    .project-desc {\n      font-size: 0.875rem;\n      color: var(--muted);\n      margin-bottom: 1.2rem;\n      line-height: 1.65;\n    }\n    .project-meta {\n      display: flex;\n      gap: 0.5rem;\n      flex-wrap: wrap;\n    }\n    .badge {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.62rem;\n      padding: 0.25rem 0.6rem;\n      background: rgba(71,140,191,0.15);\n      color: var(--godot);\n      border: 1px solid rgba(71,140,191,0.25);\n      letter-spacing: 0.05em;\n    }\n    .badge.green {\n      background: rgba(78,255,176,0.1);\n      color: var(--accent);\n      border-color: rgba(78,255,176,0.2);\n    }\n\n    \/* \u2500\u2500 VIDEO \/ YOUTUBE \u2500\u2500 *\/\n    .video-grid {\n      display: grid;\n      grid-template-columns: 1fr 2fr;\n      gap: 4rem;\n      align-items: start;\n    }\n    .video-list {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n    .video-item {\n      display: flex;\n      gap: 1rem;\n      align-items: center;\n      padding: 1rem;\n      border: 1px solid var(--border);\n      background: var(--surface);\n      cursor: pointer;\n      transition: border-color 0.2s;\n    }\n    .video-item:hover { border-color: rgba(78,255,176,0.3); }\n    .video-item.active { border-color: var(--accent); }\n    .video-thumb {\n      width: 80px;\n      height: 52px;\n      background: var(--surface2);\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.4rem;\n    }\n    .video-info { flex: 1; min-width: 0; }\n    .video-title {\n      font-family: 'Syne', sans-serif;\n      font-size: 0.85rem;\n      font-weight: 700;\n      margin-bottom: 0.2rem;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .video-date {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.65rem;\n      color: var(--muted);\n    }\n\n    .featured-video {\n      background: var(--surface);\n      border: 1px solid var(--border);\n      overflow: hidden;\n    }\n    .featured-video-thumb {\n      width: 100%;\n      aspect-ratio: 16\/9;\n      background: var(--surface2);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 4rem;\n      position: relative;\n    }\n    .play-btn {\n      position: absolute;\n      width: 64px; height: 64px;\n      background: rgba(78,255,176,0.9);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.5rem;\n      cursor: pointer;\n      transition: transform 0.2s, background 0.2s;\n    }\n    .play-btn:hover { transform: scale(1.1); background: var(--accent); }\n    .featured-video-info { padding: 1.5rem; }\n    .featured-video-title {\n      font-family: 'Syne', sans-serif;\n      font-size: 1.2rem;\n      font-weight: 700;\n      margin-bottom: 0.5rem;\n    }\n    .featured-video-desc {\n      font-size: 0.875rem;\n      color: var(--muted);\n    }\n\n    \/* \u2500\u2500 SOCIAL \u2500\u2500 *\/\n    .social-bg { background: var(--surface); }\n    .social-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 1.5rem;\n    }\n    .social-card {\n      border: 1px solid var(--border);\n      padding: 2rem;\n      background: var(--bg);\n      transition: border-color 0.25s, transform 0.2s;\n    }\n    .social-card:hover { border-color: rgba(78,255,176,0.3); transform: translateY(-3px); }\n    .social-icon {\n      font-size: 2rem;\n      margin-bottom: 1rem;\n      display: block;\n    }\n    .social-name {\n      font-family: 'Syne', sans-serif;\n      font-weight: 700;\n      margin-bottom: 0.3rem;\n    }\n    .social-handle {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.72rem;\n      color: var(--accent);\n      margin-bottom: 0.75rem;\n    }\n    .social-desc {\n      font-size: 0.85rem;\n      color: var(--muted);\n    }\n\n    \/* \u2500\u2500 CTA BANNER \u2500\u2500 *\/\n    .cta-banner {\n      background: linear-gradient(135deg, rgba(78,255,176,0.08), rgba(123,92,255,0.08));\n      border: 1px solid rgba(78,255,176,0.15);\n      padding: 4rem 3rem;\n      text-align: center;\n      max-width: 800px;\n      margin: 0 auto;\n    }\n    .cta-banner h2 {\n      font-family: 'Syne', sans-serif;\n      font-size: clamp(1.6rem, 3vw, 2.4rem);\n      font-weight: 800;\n      margin-bottom: 1rem;\n    }\n    .cta-banner p {\n      color: var(--muted);\n      margin-bottom: 2rem;\n    }\n\n    \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n    footer {\n      position: relative;\n      z-index: 1;\n      border-top: 1px solid var(--border);\n      padding: 2rem 2.5rem;\n    }\n    .footer-inner {\n      max-width: 1200px;\n      margin: 0 auto;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n    }\n    .footer-copy {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.7rem;\n      color: var(--muted);\n    }\n    .footer-links {\n      display: flex;\n      gap: 1.5rem;\n    }\n    .footer-links a {\n      font-family: 'Space Mono', monospace;\n      font-size: 0.68rem;\n      color: var(--muted);\n      text-decoration: none;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      transition: color 0.2s;\n    }\n    .footer-links a:hover { color: var(--accent); }\n\n    \/* \u2500\u2500 SCROLL ANIMATION \u2500\u2500 *\/\n    .fade-up {\n      opacity: 0;\n      transform: translateY(28px);\n      transition: opacity 0.6s ease, transform 0.6s ease;\n    }\n    .fade-up.visible {\n      opacity: 1;\n      transform: none;\n    }\n\n    \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n    @media (max-width: 900px) {\n      .hero { grid-template-columns: 1fr; padding-top: 6rem; }\n      .about-grid, .video-grid { grid-template-columns: 1fr; }\n      .projects-grid, .social-grid { grid-template-columns: 1fr 1fr; }\n      .stats-inner { grid-template-columns: 1fr 1fr; }\n      nav { padding: 1rem 1.5rem; }\n      .nav-links { display: none; }\n    }\n    @media (max-width: 600px) {\n      .projects-grid, .social-grid, .stats-inner { grid-template-columns: 1fr; }\n      .hero h1 { font-size: 2.4rem; }\n    }\n  <\/style>\n<!-- HERO -->\n  <div class=\"hero\">\n    <div class=\"hero-content\">\n      <div class=\"hero-label\">Indie GameDev \u00b7 IT Professional<\/div>\n      <h1>\n        Games bauen,\n        <span class=\"line-accent\">ehrlich erz\u00e4hlt.<\/span>\n        <span class=\"line-dim\">Mit Godot. Im Nebenerwerb.<\/span>\n      <\/h1>\n      <p class=\"hero-desc\">\n        Hi, ich bin Daniel! \ud83d\udc4b Familienvater, Vollzeit-Angestellter und leidenschaftlicher Spieleentwickler.\n        Ich zeige dir, wie echter GameDev aussieht \u2013 auch wenn man nur 2 Stunden am Wochenende hat.\n      <\/p>\n      <div class=\"hero-actions\">\n        <a href=\"https:\/\/www.youtube.com\/channel\/UCWZrsg6EmMFHKdClzPenthA\" target=\"_blank\" class=\"btn-primary\">\u25b6 Videos ansehen<\/a>\n        <a href=\"#projekte\" class=\"btn-ghost\">Meine Projekte<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"hero-visual\">\n      <div class=\"glow-blob blob-1\"><\/div>\n      <div class=\"glow-blob blob-2\"><\/div>\n      <div class=\"terminal-card\">\n        <div class=\"terminal-header\">\n          <span class=\"dot dot-r\"><\/span>\n          <span class=\"dot dot-y\"><\/span>\n          <span class=\"dot dot-g\"><\/span>\n          <span class=\"terminal-title\">daniel_rhein.gd<\/span>\n        <\/div>\n        <div class=\"terminal-body\">\n          <div><span class=\"t-comment\"># Mein Setup als Indie Dev<\/span><\/div>\n          <br>\n          <div><span class=\"t-key\">extends<\/span> <span class=\"t-val\">Node<\/span><\/div>\n          <br>\n          <div><span class=\"t-key\">@export<\/span> <span class=\"t-val\">var<\/span> name = <span class=\"t-str\">&#8220;Daniel Rhein&#8221;<\/span><\/div>\n          <div><span class=\"t-key\">@export<\/span> <span class=\"t-val\">var<\/span> engine = <span class=\"t-str\">&#8220;Godot 4&#8221;<\/span><\/div>\n          <div><span class=\"t-key\">@export<\/span> <span class=\"t-val\">var<\/span> tagsPerWeek = <span class=\"t-num\">2<\/span><\/div>\n          <div><span class=\"t-key\">@export<\/span> <span class=\"t-val\">var<\/span> family = <span class=\"t-val\">true<\/span><\/div>\n          <div><span class=\"t-key\">@export<\/span> <span class=\"t-val\">var<\/span> fullTimeJob = <span class=\"t-val\">true<\/span><\/div>\n          <br>\n          <div><span class=\"t-key\">func<\/span> <span class=\"t-val\">_ready<\/span>():<\/div>\n          <div>&nbsp;&nbsp;<span class=\"t-comment\"># macht es trotzdem<\/span><\/div>\n          <div>&nbsp;&nbsp;build_game()<span class=\"t-cursor\"><\/span><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- STATS BAR -->\n  <div class=\"stats-bar\">\n    <div class=\"stats-inner\">\n      <div class=\"fade-up\">\n        <span class=\"stat-num\">Godot<\/span>\n        <span class=\"stat-label\">Game Engine<\/span>\n      <\/div>\n      <div class=\"fade-up\">\n        <span class=\"stat-num\">GDScript<\/span>\n        <span class=\"stat-label\">Hauptsprache<\/span>\n      <\/div>\n      <div class=\"fade-up\">\n        <span class=\"stat-num\">2h<\/span>\n        <span class=\"stat-label\">Dev-Zeit \/ Woche<\/span>\n      <\/div>\n      <div class=\"fade-up\">\n        <span class=\"stat-num\">100%<\/span>\n        <span class=\"stat-label\">Realistische DevLogs<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ABOUT -->\n  <section id=\"about\">\n    <div class=\"section-inner\">\n      <div class=\"about-grid\">\n        <div class=\"about-img-wrap fade-up\">\n          <div class=\"about-avatar\">\ud83c\udfae<\/div>\n          <div class=\"about-accent-box\"><\/div>\n        <\/div>\n        <div>\n          <div class=\"section-tag fade-up\">\/\/ Wer steckt dahinter?<\/div>\n          <h2 class=\"section-title fade-up\">Gamedev ohne Glamour \u2013<br>nur echter Fortschritt.<\/h2>\n          <p class=\"fade-up\" style=\"color:var(--muted); margin-bottom:1rem;\">\n            Ich bin Daniel, IT-Profi im Hauptjob und Spieleentwickler im Herzen. Zwischen Familienleben,\n            Vollzeitstelle und dem echten Alltag entwickle ich Spiele mit der <strong style=\"color:var(--text)\">Godot Engine<\/strong> \u2013\n            und dokumentiere dabei jeden Schritt.\n          <\/p>\n          <p class=\"fade-up\" style=\"color:var(--muted); margin-bottom:2rem;\">\n            Mein YouTube-Kanal zeigt, wie GameDev wirklich funktioniert: keine Hochglanz-Tutorials,\n            keine unbegrenzten Dev-Stunden. Nur ehrliche Devlogs aus dem echten Leben.\n          <\/p>\n          <div class=\"tag-row fade-up\">\n            <span class=\"tag active\">Godot 4<\/span>\n            <span class=\"tag active\">GDScript<\/span>\n            <span class=\"tag\">2D &#038; 3D Games<\/span>\n            <span class=\"tag\">Indie GameDev<\/span>\n            <span class=\"tag\">DevLog<\/span>\n            <span class=\"tag\">Nebenerwerb<\/span>\n            <span class=\"tag\">YouTube Creator<\/span>\n            <span class=\"tag\">IT Professional<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- PROJECTS -->\n  <section id=\"projekte\" class=\"projects-bg\">\n    <div class=\"section-inner\">\n      <div class=\"section-tag fade-up\">\/\/ Aktuelle Projekte<\/div>\n      <h2 class=\"section-title fade-up\">Was ich gerade baue<\/h2>\n      <p class=\"section-sub fade-up\">Spielprojekte, die in echten Wochenendsessions entstehen \u2013 kein Prototype-Graveyard, sondern echte Fortschritte.<\/p>\n\n      <div class=\"projects-grid\">\n        <div class=\"project-card fade-up\">\n          <span class=\"project-icon\">\ud83c\udf0c<\/span>\n          <div class=\"project-title\">Projekt Nebula<\/div>\n          <p class=\"project-desc\">Ein 2D-Weltraum-Shooter mit prozeduralen Leveln und GDScript-basierter KI. Entwickelt in kleinen Sprints an Wochenenden.<\/p>\n          <div class=\"project-meta\">\n            <span class=\"badge\">Godot 4<\/span>\n            <span class=\"badge\">GDScript<\/span>\n            <span class=\"badge green\">In Progress<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"project-card fade-up\">\n          <span class=\"project-icon\">\ud83c\udff0<\/span>\n          <div class=\"project-title\">Dungeon Prototype<\/div>\n          <p class=\"project-desc\">Roguelike-Dungeon-Crawler als Technik-Experiment. Schwerpunkt: prozedurale Generierung und Tile-Map-Systeme in Godot.<\/p>\n          <div class=\"project-meta\">\n            <span class=\"badge\">Godot 4<\/span>\n            <span class=\"badge\">TileMap<\/span>\n            <span class=\"badge\" style=\"background:rgba(248,113,113,0.1);color:#f87171;border-color:rgba(248,113,113,0.2)\">Pausiert<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"project-card fade-up\">\n          <span class=\"project-icon\">\ud83d\udcfa<\/span>\n          <div class=\"project-title\">YouTube-Content<\/div>\n          <p class=\"project-desc\">Ehrliche Devlogs, Tutorials und Einblicke in meinen Entwicklungsalltag \u2013 speziell f\u00fcr Entwickler mit wenig Zeit.<\/p>\n          <div class=\"project-meta\">\n            <span class=\"badge blue\">Aktiv<\/span>\n            <span class=\"badge\">Devlog<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- VIDEOS -->\n  <section id=\"videos\">\n    <div class=\"section-inner\">\n      <div class=\"section-tag fade-up\">\/\/ YouTube-Kanal<\/div>\n      <h2 class=\"section-title fade-up\">Devlogs &#038; Tutorials<\/h2>\n      <p class=\"section-sub fade-up\">Echte Einblicke in meinen GameDev-Alltag. Kein Perfektionismus \u2013 nur Fortschritt.<\/p>\n\n      <div class=\"video-grid fade-up\">\n        <div class=\"video-list\">\n          <div class=\"video-item active\">\n            <div class=\"video-thumb\">\ud83c\udfae<\/div>\n            <div class=\"video-info\">\n              <div class=\"video-title\"><a href=\"https:\/\/youtu.be\/C_jgvS9XbLs?si=22Jjx7CaMHTAJ_pe\">Devlog #1 \u2013 Der Start<\/a><\/div>\n              <div class=\"video-date\">Aktuellstes Video<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"video-item\">\n            <div class=\"video-thumb\">\ud83c\udf0c<\/div>\n            <div class=\"video-info\">\n              <div class=\"video-title\"><a href=\"https:\/\/youtube.com\/playlist?list=PL2gj3Y5YTU2BfSeu7f6vERJQWcpGTZsbR&#038;si=yZyCADr6fopECkJF\">Godot 4 Basics<\/a><\/div>\n              <div class=\"video-date\">Tutorial<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"video-item\">\n            <div class=\"video-thumb\">\u2699\ufe0f<\/div>\n            <div class=\"video-info\">\n              <div class=\"video-title\">Mein Setup 2024<\/div>\n              <div class=\"video-date\">Setup-Video<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"video-item\">\n            <div class=\"video-thumb\">\ud83c\udfc6<\/div>\n            <div class=\"video-info\">\n              <div class=\"video-title\">Game Jam Recap<\/div>\n              <div class=\"video-date\">Devlog<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"featured-video\">\n          <div class=\"featured-video-thumb\">\n            \ud83c\udfae\n            <div class=\"play-btn\">\u25b6<\/div>\n          <\/div>\n          <div class=\"featured-video-info\">\n            <div class=\"featured-video-title\">Devlog #1 \u2013 Wie ich mit GameDev anfing<\/div>\n            <p class=\"featured-video-desc\">Der erste Einblick in mein Indie-GameDev-Projekt. Ich zeige meinen Workflow, mein Setup und warum ich trotz Vollzeit-Job und Familie mit Godot 4 anfange, Spiele zu entwickeln.<\/p>\n            <div style=\"margin-top:1rem;\">\n              <a href=\"https:\/\/www.youtube.com\/channel\/UCWZrsg6EmMFHKdClzPenthA\" target=\"_blank\" class=\"btn-primary\" style=\"font-size:0.72rem;\">Zum Kanal \u25b6<\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SOCIAL -->\n  <section class=\"social-bg\" id=\"kontakt\">\n    <div class=\"section-inner\">\n      <div class=\"section-tag fade-up\">\/\/ Folge mir<\/div>\n      <h2 class=\"section-title fade-up\">Bleib dabei<\/h2>\n      <p class=\"section-sub fade-up\">Verfolge meinen GameDev-Weg auf verschiedenen Plattformen \u2013 ehrlich, ungesch\u00f6nt, regelm\u00e4\u00dfig.<\/p>\n\n      <div class=\"social-grid\">\n        <div class=\"social-card fade-up\">\n          <span class=\"social-icon\">\u25b6<\/span>\n          <div class=\"social-name\">YouTube<\/div>\n          <div class=\"social-handle\">@DanielRheinGameDev<\/div>\n          <p class=\"social-desc\">Devlogs, Tutorials und ehrliche Einblicke in meinen GameDev-Alltag mit Godot.<\/p>\n          <br>\n          <a href=\"https:\/\/www.youtube.com\/channel\/UCWZrsg6EmMFHKdClzPenthA\" target=\"_blank\" class=\"btn-ghost\" style=\"font-size:0.7rem;\">Kanal besuchen<\/a>\n        <\/div>\n        <div class=\"social-card fade-up\">\n          <span class=\"social-icon\">\ud83e\udd8b<\/span>\n          <div class=\"social-name\">Bluesky<\/div>\n          <div class=\"social-handle\">@raymondrhein.bsky.social<\/div>\n          <p class=\"social-desc\">Schnelle Updates, GameDev-Gedanken und Interaktion mit der Community.<\/p>\n          <br>\n          <a href=\"https:\/\/bsky.app\/profile\/raymondrhein.bsky.social\" target=\"_blank\" class=\"btn-ghost\" style=\"font-size:0.7rem;\">Profil besuchen<\/a>\n        <\/div>\n        <div class=\"social-card fade-up\">\n          <span class=\"social-icon\">\u2709\ufe0f<\/span>\n          <div class=\"social-name\">Kontakt<\/div>\n          <div class=\"social-handle\">danielrheinit.de<\/div>\n          <p class=\"social-desc\">Projektanfragen, Kollaborationen oder einfach eine Nachricht hinterlassen.<\/p>\n          <br>\n          <a href=\"mailto:info@danielrheinit.de\" class=\"btn-ghost\" style=\"font-size:0.7rem;\">Nachricht senden<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- CTA BANNER -->\n  <section>\n    <div class=\"section-inner\" style=\"padding:3rem 2.5rem 6rem;\">\n      <div class=\"cta-banner fade-up\">\n        <h2>Starte deinen GameDev-Weg jetzt.<\/h2>\n        <p>Kein perfektes Setup n\u00f6tig. Kein unbegrenztes Zeitbudget. Nur du, eine Engine und der erste Schritt.<\/p>\n        <a href=\"https:\/\/www.youtube.com\/channel\/UCWZrsg6EmMFHKdClzPenthA\" target=\"_blank\" class=\"btn-primary\">\u25b6 Jetzt den Kanal entdecken<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <script>\n    \/\/ Scroll-fade-in\n    const els = document.querySelectorAll('.fade-up');\n    const io = new IntersectionObserver(entries => {\n      entries.forEach((e, i) => {\n        if (e.isIntersecting) {\n          setTimeout(() => e.target.classList.add('visible'), i * 80);\n          io.unobserve(e.target);\n        }\n      });\n    }, { threshold: 0.12 });\n    els.forEach(el => io.observe(el));\n\n    \/\/ Video list interaction\n    document.querySelectorAll('.video-item').forEach(item => {\n      item.addEventListener('click', function() {\n        document.querySelectorAll('.video-item').forEach(i => i.classList.remove('active'));\n        this.classList.add('active');\n      });\n    });\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Indie GameDev \u00b7 IT Professional Games bauen, ehrlich erz\u00e4hlt. Mit Godot. Im Nebenerwerb. Hi, ich bin Daniel! \ud83d\udc4b Familienvater, Vollzeit-Angestellter und leidenschaftlicher Spieleentwickler. Ich zeige dir, wie echter GameDev aussieht \u2013 auch wenn man nur 2 Stunden am Wochenende hat. \u25b6 Videos ansehen Meine Projekte daniel_rhein.gd # Mein Setup als Indie Dev extends Node @export&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/danielrheinit.de\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danielrheinit.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/danielrheinit.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/danielrheinit.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danielrheinit.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":16,"href":"https:\/\/danielrheinit.de\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/danielrheinit.de\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/danielrheinit.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}