<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
  <style>
    .primary { fill: #d35400; }
    .secondary { fill: #2c3e50; }
    .accent { fill: #f39c12; }
    .light { fill: #ecf0f1; }
    .background { fill: #f9f4e7; }
  </style>

  <!-- Background -->
  <rect width="600" height="400" class="background" />
  
  <!-- Retro pattern -->
  <pattern id="diamonds-pattern" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect x="9" y="9" width="2" height="2" transform="rotate(45 10 10)" class="secondary" opacity="0.1" />
  </pattern>
  <rect width="600" height="400" fill="url(#diamonds-pattern)" />

  <!-- Title bar -->
  <rect width="600" height="80" class="secondary" opacity="0.1" />
  <text x="300" y="50" font-family="Georgia" font-size="26" fill="#2c3e50" text-anchor="middle" font-weight="bold">KÖRPERSPRACHE RICHTIG EINSETZEN</text>
  
  <!-- Central illustration - body language demonstration -->
  <g transform="translate(300, 200)">
    <!-- Multiple body postures -->
    
    <!-- Closed posture - represents negative body language -->
    <g transform="translate(-200, 0)">
      <!-- Figure outline -->
      <path d="M0,-60 L0,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      
      <!-- Head -->
      <circle cx="0" cy="-75" r="20" class="light" stroke="#2c3e50" stroke-width="2" />
      
      <!-- Face - frowning -->
      <path d="M-7,-70 Q0,-77 7,-70" fill="none" stroke="#2c3e50" stroke-width="1" />
      <circle cx="-7" cy="-80" r="2" class="secondary" />
      <circle cx="7" cy="-80" r="2" class="secondary" />
      
      <!-- Arms - crossed -->
      <path d="M0,-50 L-30,-30 L-20,-10 L15,-20 L25,-40 L0,-50" class="secondary" opacity="0.7" />
      
      <!-- Legs - close together -->
      <path d="M0,0 L-5,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      <path d="M0,0 L5,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      
      <!-- Label -->
      <rect x="-50" y="80" width="100" height="30" rx="5" class="light" stroke="#2c3e50" stroke-width="1" />
      <text x="0" y="100" font-family="Arial" font-size="12" fill="#2c3e50" text-anchor="middle">VERSCHLOSSEN</text>
    </g>
    
    <!-- Neutral posture - middle ground -->
    <g transform="translate(0, 0)">
      <!-- Figure outline -->
      <path d="M0,-60 L0,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      
      <!-- Head -->
      <circle cx="0" cy="-75" r="20" class="light" stroke="#2c3e50" stroke-width="2" />
      
      <!-- Face - neutral -->
      <path d="M-7,-70 L7,-70" fill="none" stroke="#2c3e50" stroke-width="1" />
      <circle cx="-7" cy="-80" r="2" class="secondary" />
      <circle cx="7" cy="-80" r="2" class="secondary" />
      
      <!-- Arms - at sides -->
      <path d="M0,-50 L-25,-20" stroke="#2c3e50" stroke-width="5" fill="none" />
      <path d="M0,-50 L25,-20" stroke="#2c3e50" stroke-width="5" fill="none" />
      
      <!-- Legs - shoulder width apart -->
      <path d="M0,0 L-15,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      <path d="M0,0 L15,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      
      <!-- Label -->
      <rect x="-50" y="80" width="100" height="30" rx="5" class="accent" stroke="#2c3e50" stroke-width="1" />
      <text x="0" y="100" font-family="Arial" font-size="12" fill="#2c3e50" text-anchor="middle">NEUTRAL</text>
    </g>
    
    <!-- Open posture - represents positive body language -->
    <g transform="translate(200, 0)">
      <!-- Figure outline -->
      <path d="M0,-60 L0,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      
      <!-- Head -->
      <circle cx="0" cy="-75" r="20" class="light" stroke="#2c3e50" stroke-width="2" />
      
      <!-- Face - smiling -->
      <path d="M-7,-70 Q0,-63 7,-70" fill="none" stroke="#2c3e50" stroke-width="1" />
      <circle cx="-7" cy="-80" r="2" class="secondary" />
      <circle cx="7" cy="-80" r="2" class="secondary" />
      
      <!-- Arms - open gesture -->
      <path d="M0,-50 L-40,-15" stroke="#2c3e50" stroke-width="5" fill="none" />
      <path d="M0,-50 L40,-15" stroke="#2c3e50" stroke-width="5" fill="none" />
      <path d="M-40,-15 L-60,-30" stroke="#2c3e50" stroke-width="5" fill="none" />
      <path d="M40,-15 L60,-30" stroke="#2c3e50" stroke-width="5" fill="none" />
      
      <!-- Legs - confidently apart -->
      <path d="M0,0 L-25,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      <path d="M0,0 L25,60" stroke="#2c3e50" stroke-width="5" fill="none" />
      
      <!-- Label -->
      <rect x="-50" y="80" width="100" height="30" rx="5" class="primary" stroke="#2c3e50" stroke-width="1" />
      <text x="0" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle">OFFEN</text>
    </g>
  </g>
  
  <!-- Key elements of body language -->
  <g transform="translate(300, 330)">
    <rect x="-250" y="-20" width="500" height="50" rx="5" class="light" stroke="#2c3e50" stroke-width="1" />
    
    <!-- Key elements listed -->
    <g transform="translate(-200, 0)">
      <circle cx="0" cy="0" r="10" class="primary" opacity="0.7" />
      <text x="20" y="5" font-family="Arial" font-size="14" fill="#2c3e50">HALTUNG</text>
    </g>
    
    <g transform="translate(-80, 0)">
      <circle cx="0" cy="0" r="10" class="primary" opacity="0.7" />
      <text x="20" y="5" font-family="Arial" font-size="14" fill="#2c3e50">GESTIK</text>
    </g>
    
    <g transform="translate(20, 0)">
      <circle cx="0" cy="0" r="10" class="primary" opacity="0.7" />
      <text x="20" y="5" font-family="Arial" font-size="14" fill="#2c3e50">MIMIK</text>
    </g>
    
    <g transform="translate(130, 0)">
      <circle cx="0" cy="0" r="10" class="primary" opacity="0.7" />
      <text x="20" y="5" font-family="Arial" font-size="14" fill="#2c3e50">BLICKKONTAKT</text>
    </g>
  </g>
  
  <!-- Eye contact indicator at top -->
  <g transform="translate(300, 120)">
    <circle cx="0" cy="0" r="30" class="light" stroke="#2c3e50" stroke-width="2" />
    <circle cx="0" cy="0" r="15" class="secondary" />
    <circle cx="0" cy="0" r="7" class="accent" />
    <circle cx="5" cy="-5" r="3" fill="white" />
    
    <!-- Lines radiating out - representing visual connection -->
    <path d="M30,0 L60,0 M-30,0 L-60,0 M0,30 L0,60 M0,-30 L0,-60 M21,21 L42,42 M-21,21 L-42,42 M21,-21 L42,-42 M-21,-21 L-42,-42" stroke="#d35400" stroke-width="1.5" stroke-dasharray="5,3" />
  </g>

  <!-- Retro style decorative elements -->
  <g opacity="0.3">
    <rect x="20" y="20" width="15" height="15" class="secondary" />
    <rect x="565" y="20" width="15" height="15" class="secondary" />
    <rect x="20" y="365" width="15" height="15" class="secondary" />
    <rect x="565" y="365" width="15" height="15" class="secondary" />
  </g>
</svg>
